CSS field-sizing

One line of code for auto sizing elements with editable content.

Adam Argyle

Without field-sizing, to create a well-sized input field you had to either guess at an average size of a text field input or use JavaScript to count characters and increase the element height or width as the user entered text. In other words, it wasn't easy, and it was error prone when trying to follow the content that a user had entered into an input.

With field-sizing, you need one line of CSS to enable sizing based on the content. This content based sizing style also works for more than a textarea!

textarea, select, input {
  field-sizing: content;
}

Browser Support

• 123
• 123
• x
• x

Source

Quick links

Specification | Explainer

Like short form videos?

Wes Bos and Jhey each have a great video on Twitter introducing you to field-sizing.

Which elements are affected by field-sizing?

Here is a list of <form> elements that field-sizing works on, with a summary of the effects it has on each.

<textarea>

The input collapses down to a min-inline-size or to fit the placeholder.

As users type, the input grows in the inline direction until it reaches a maximum inline size, at which point text will wrap and the block size of the input grows to fit the new line.

<select> and <select multiple>

The select element shrinks to fit the selected option.

A select with the multiple attribute grows to fit the widest option and to be as tall as needed to fit the number of options.

<input type="text">, <input type="email"> and <input type="number">

The input collapses down to a min-inline-size or to fit the placeholder.

As users type, the input grows in the inline direction until it reaches a max-inline-size, at which point overflow clips the input value.

<input type="file">

The input collapses down to the button and the prefilled filename text.

Upon uploading a file, the input becomes as wide as the button plus the filename text.

Seeing, testing, and comparing results

Here is an interactive and minimal example of the before and after behaviors of each form element, as affected by field-sizing.

Try it on Codepen

Looking closer

When using a [placeholder], the placeholder becomes the content. This was mentioned previously but called out here, as it is important to know when styling a form. A long or short placeholder will change the intrinsic size of inputs with field-sizing: content.

Try it on Codepen

Empty and overflowing style handling

Using field-sizing does mean you have to do some additional work. Ahmad Shadeed calls it "defensive CSS," where the goal is not necessarily to spell out exactly how something should behave or look, rather to protect it from getting into an undesirable visual state. Previously, inputs had a fair amount of fixed sizes, but after applying field-sizing: content, the inputs can become much too small or much too large.

The following styles are a good starting point. They help the elements not collapse into too small of a box and also, in the case of textarea, not grow too large.

textarea {
  min-block-size: 3.5rlh;
  min-inline-size: 20ch;
  max-inline-size: 50ch;
}

select {
  min-inline-size: 5ch;
  min-block-size: 1.5lh;
}

input {
  min-inline-size: 7ch;
}

This CSS uses relative units for the sizing. The new lh unit is perfect for the block sizes and ch works well for the inline sizes.

What is the default value of field-sizing?

The default value of field-sizing is fixed, and it only accepts the two values of fixed or content.