Text fields
Text-like inputs and textarea fill the width. Wrap a field in its label, or put the
label right before it with a matching for.
Accessibility
Every field needs a label. Placeholders are hints, not labels: they disappear as soon as someone types.
Customize
--m-density sets the padding, and --m-radius the corners.
Select
A single select opens a styled picker where the browser supports customizable selects, and a
native one elsewhere.
Accessibility
Keyboard and screen reader behavior come from the browser in both versions.
Customize
The picker uses the overlay surface and --m-radius.
Validation
A field turns red after the user leaves it invalid (:user-invalid), or whenever it has
aria-invalid="true". aria-invalid="false" marks it valid. A small right
after the field is helper text that takes the same color.
Accessibility
A warning or check icon joins the border color, so the state doesn't rely on color. Connect helper text with
aria-describedby so it's announced.
Customize
The danger and success colors adapt to the scheme and to more contrast.
Float labels
Put a label's text in a span right before its field, and give the field a placeholder. The label
sits inside the field while it's empty, and shrinks to the top when it's focused or filled.
Accessibility
The label stays visible, so it never disappears like a placeholder. A placeholder shows as a hint once the
field is focused; use placeholder=" " for none.
Customize
Fields with a float label are taller, to fit the small label above the text.
Checkboxes and radios
Group related choices in a fieldset with a legend. A small right after
the fieldset is helper text for the whole group.
Accessibility
The indeterminate state can only be set from script (input.indeterminate = true). Labels of
disabled controls are muted.
Customize
Checked controls use --m-primary.
Switches
A checkbox with role="switch" is an on/off switch. Screen readers announce it as one.
Accessibility
The thumb slides only when motion is allowed, and forced-colors mode redraws it in system colors.
Customize
The track turns --m-primary when on.
Range, color, and file
Sliders get a filled track, color inputs a bordered swatch, and file inputs a secondary button.
Accessibility
These controls keep their native keyboard behavior and draw the standard focus ring.
Customize
The slider's fill and thumb use --m-primary.
Search
A search element joins its field and button into one control, with the controls in a
form or directly inside it.
Accessibility
search is a landmark, so screen reader users can jump to it. Label the field, because the
magnifier icon is decoration.
Customize
The joined corners use --m-radius.
Field groups
role="group" joins a field with its buttons, and a span in the group is a text box
for a prefix or unit.
Accessibility
The text isn't part of the field's label, so point the field at it with aria-describedby, or
repeat it in the label.
Customize
The text box uses the raised surface and --m-density padding, like the fields.
Fieldsets
A fieldset frames a group. Disabling it disables every control inside and mutes their labels.
Accessibility
A legend names the group for screen readers. Read-only fields stay focusable, and disabled ones
don't.
Customize
The frame uses the border color and --m-radius.