One line of code for auto sizing elements with editable content.
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
Quick links
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.
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.
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.