# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/field-sizing.mdx

import { ApiTable } from "@/components/api-table.tsx";
import { Example } from "@/components/example.tsx";
import { Figure } from "@/components/figure.tsx";
import { ResponsiveDesign } from "@/components/content.tsx";

export const title = "field-sizing";
export const description = "Utilities for controlling the sizing of form controls.";

<ApiTable
  rows={[
    ["field-sizing-fixed", "field-sizing: fixed;"],
    ["field-sizing-content", "field-sizing: content;"],
  ]}
/>

## Examples

### Sizing based on content

Use the `field-sizing-content` utility to allow a form control to adjust it's size based on the content:

<Figure hint="Type in the input below to see the size change">

<Example>
  {
    <textarea
      rows="2"
      defaultValue="Latex Salesman, Vanderlay Industries"
      className="mx-auto block field-sizing-content rounded-md p-2 text-sm text-gray-950 outline-1 outline-gray-900/10 focus:outline-2 focus:outline-gray-900 dark:bg-gray-950/25 dark:text-white dark:outline-1 dark:outline-white/5 dark:focus:outline-white/20"
    />
  }
</Example>

```html
<!-- [!code classes:field-sizing-content] -->
<textarea class="field-sizing-content ..." rows="2">
  Latex Salesman, Vanderlay Industries
</textarea>
```

</Figure>

### Using a fixed size

Use the `field-sizing-fixed` utility to make a form control use a fixed size:

<Figure hint="Type in the input below to see the size remain the same">

<Example>
  {
    <textarea
      rows="2"
      defaultValue="Latex Salesman, Vanderlay Industries"
      className="mx-auto block field-sizing-fixed w-80 rounded-md p-2 text-sm text-gray-950 outline-1 outline-gray-900/10 focus:outline-2 focus:outline-gray-900 dark:bg-gray-950/25 dark:text-white dark:outline-1 dark:outline-white/5 dark:focus:outline-white/20"
    />
  }
</Example>

```html
<!-- [!code classes:field-sizing-fixed] -->
<textarea class="field-sizing-fixed w-80 ..." rows="2">
  Latex Salesman, Vanderlay Industries
</textarea>
```

</Figure>

### Responsive design

<ResponsiveDesign
  element="input"
  property="field-sizing"
  defaultClass="field-sizing-content"
  featuredClass="field-sizing-fixed"
/>