Field Sizing

Controls the sizing of elements that have a default preferred size.

Class	Style
`fs-f`	`field-sizing: fixed;`
`fs-c`	`field-sizing: content;`

Fixed

Initial value

Allows the field to size itself based on the content, adjusting its size dynamically to fit the content inside.

<div class="d-f fd-c">
  <label class="mb-2">Write a message:</label>
  <textarea class="b-2 fs-f max-h-50 max-w-100 r-none rad-1"></textarea>
</div>

Content

Ensures that the field maintains a fixed size, regardless of the content within it.

<div class="d-f fd-c">
  <label class="mb-2">Write a message:</label>
  <textarea class="b-2 fs-c max-h-50 max-w-100 r-none rad-1"></textarea>
</div>

Using utility variants

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Using media queries

You can combine responsive breakpoints like sm:fs-*, md:fs-*, lg:fs-*, and xxl:fs-* to allow targeting specific utilities in different viewports.

Using hover states

Alternatively, you can apply :hover by using h:fs-* utility to override elements and change their values when hovering over them.