Components
Textarea
Multi-line text inputs with auto-growth and shared form field tokens.
.ui-textarea shares --ui-field-* tokens and :user-invalid validation states with the form input family. It applies field-sizing: content to auto-expand with text input, clamped between --ui-textarea-min-block-size (5lh) and --ui-textarea-max-block-size (12lh).
Default
Loading components…
<div class="ui-field"> <label data-slot="field-label" for="f-message">Message</label> <textarea class="ui-textarea" id="f-message" name="message" inputmode="text" placeholder="Your message" ></textarea></div>/** * textarea.css — Textarea (.ui-textarea) * * @layer variables, components * @requires layers.css, _variables.css, fields.css * @uses field-sizing: content — auto-grow with text (modern browsers; * falls back to fixed min/max block-size where unsupported) * @tokens --ui-textarea-* (@layer variables) */@layer variables { :root { --ui-textarea-inline-size: 100%; --ui-textarea-min-inline-size: 0; --ui-textarea-min-block-size: 5lh; --ui-textarea-max-block-size: 12lh; --ui-textarea-padding: var(--ui-field-padding); --ui-textarea-font-size: var(--font-size-sm); --ui-textarea-line-height: var(--leading-sm); --ui-textarea-border: 1px solid var(--ui-field-border); --ui-textarea-border-radius: var(--ui-field-radius); --ui-textarea-resize: vertical; }}@layer zazz.components { /* =========================================================================== TEXTAREA — .ui-textarea (auto-sizing) - field-sizing: content grows the box with the text; height clamps between min/max block-size, then scrolls. - Shares the --ui-field-* tokens defined in fields.css so it matches .ui-input / .ui-select / .ui-button. =========================================================================== */ .ui-textarea { field-sizing: content; inline-size: var(--ui-textarea-inline-size); min-inline-size: var(--ui-textarea-min-inline-size); min-block-size: var(--ui-textarea-min-block-size); max-block-size: var(--ui-textarea-max-block-size); padding: var(--ui-textarea-padding); font-size: var(--ui-textarea-font-size); line-height: var(--ui-textarea-line-height); color: var(--ui-field-foreground); background-color: var(--ui-field-background); border: var(--ui-textarea-border); border-radius: var(--ui-textarea-border-radius); resize: var(--ui-textarea-resize); /* ring renders as box-shadow; transparent outline twin keeps focus visible in forced-colors / high-contrast modes */ --_ring-offset-width: 0px; --_ring-width: 0px; --_ring: color-mix(in oklch, var(--ui-field-ring-color) var(--ring-opacity), transparent); box-shadow: 0 0 0 var(--_ring-offset-width) var(--ring-offset-color), 0 0 0 calc(var(--_ring-offset-width) + var(--_ring-width)) var(--_ring, var(--ring)); outline: var(--outline-width) var(--outline-style) transparent; outline-offset: var(--outline-offset); transition: var(--default-transition); } .ui-textarea:hover { border-color: var(--ui-field-border--hover); background-color: var(--ui-field-background--hover); } .ui-textarea:focus-visible { background-color: var(--ui-field-background--focus); border-color: var(--ui-field-border--focus); --_ring-offset-width: var(--ring-offset-width); --_ring-width: var(--ring-width); outline-color: transparent; }}