Controls

Write a plain form. Each control fills the width, and a control inside its label sits right under the label text. Buttons, submit buttons included, keep the width of their text.

Select

A select gets a chevron. Where the browser supports a customizable select, the option list follows the theme too.

Textarea

A textarea grows with its text, from 4 to 16 lines, where the browser supports field-sizing. A rows attribute keeps a fixed height.

Helper text

A small right after a control is its helper text. Link it with aria-describedby.

Fieldset

A fieldset groups related controls under a legend. disabled on the fieldset turns off and fades every control inside.

Side by side

Put controls in a .grid to place them in columns that stack on narrow screens.

Output

output shows a computed value in bold with even digit widths, so it does not shift as it changes.

Disabled and read only

Sizes

Styles

.rounded gives pill corners, .square removes them and .outlined makes the background transparent.

Variables

Buttons and inputs share the --i-control- variables.