[css-forms-1] Should field-sizing: content be in base appearance stylesheet?

[lukewarlow]

It's unclear to me what the sizing model for base appearance styled elements are but it feels like field-sizing: content should be the default behaviour.

[nt1m]

I'm not too sure about this, the majority of form controls I've seen are fixed size, including real-life physical form control on paper.

I wouldn't be closed to the idea though, if there is evidence that field-sizing: content wouldn't end up being a bogus default that constantly needs to get overridden.

[lukewarlow]

I suspect for textarea specifically it would be the better default. Even if the default stylesheet defined a min and max height of say 3lh. That way they can override those properties and it just work. Otherwise they'll have to set field-sizing too?

[nt1m]

Yeah I could definitely see that being the case for textarea, I just wasn't sure about inputs.

[lukewarlow]

Something like the below styles will give you field-sizing: content behaviour but with a default width and height for textual inputs and textareas. These styles mostly match the existing intrinsic sizes (though they're based on the ch unit for a very specific microsoft font so it's only approximate).

(exact selector for inputs would need some thinking obviously, deciding between a not / is selector I guess depends if the include is larger than the block.)

textarea {
    field-sizing: content;
    block-size: calc(2lh + 4px + 2px);
    inline-size: calc(22ch + 4px + 2px);
}

input:is([type=text], [type=search], [type=number], [type=email], [type=url], [type=tel]) {
    field-sizing: content;
    
    block-size: calc(1lh + 2px + 2px);
    inline-size: calc(20ch + 4px + 2px);
}

With this authors can get the auto growing behaviour by doing something like:

textarea {
   height: auto;
   /* min-height max-height styles work to constrain size. */
}

input:is([type=text], [type=search], [type=number], [type=email], [type=url], [type=tel])  {
   width: auto;
   /* min-width max-width styles work to constrain size. */
}

This way users don't need to override field-sizing basically ever? They get the fixed sizing by default but can adjust as expected?

[lukewarlow]

Also base appearance select effectively forces field-sizing: content to true (though currently the computed style still says fixed in chrome), so perhaps we should also add:

select {
   field-sizing: content !important;
}

So that the behaviour is easier to debug?

[nt1m]

Also base appearance select effectively forces field-sizing: content to true (though currently the computed style still says fixed in chrome), so perhaps we should also add:

select {
field-sizing: content !important;
}
So that the behaviour is easier to debug?

This makes sense to me!

[lukewarlow]

Turns out we might need to consider auto stretching from grid-layout

#11897 (comment)

[nt1m]

I'm started to be convinced that we should do something like this, to make sizing of form controls more similar to other elements.

I don't think field-sizing: content is fully ideal though. We probably want the controls to fill the whole available inline-size when block display is used. Maybe this should be a new value like field-sizing: auto or similar, that just makes sizing similar to using a normal <div>.

I do think there should be a default size to controls that is reasonable for users to type in though, so we might want some UA styles to achieve that. That could either be a min size as Luke suggests above, or using block level display, so that the default inline-size is just to fill the whole available space.

cc @fantasai @lukewarlow @tkent-google @dbaron