Docs
Forms
Labels, fieldsets, inputs, selects, textareas, and buttons.
Form controls inherit the document font and color tokens. Labels remain visible, fieldsets group related controls, and focus styles are shared across every interactive element.
Labels and inputs
<label for="name">Name</label>
<input id="name" name="name" type="text" autocomplete="name">
<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email">
<label for="message">Message</label>
<textarea id="message" name="message" rows="5"></textarea>
Inputs, selects, and textareas fill the available width. Checkboxes, radios, ranges, and color inputs opt out of the full-width rule.
Fieldsets
Use a fieldset when several controls belong together. The legend is styled to sit on the border.
<fieldset>
<legend>Notification settings</legend>
<label><input type="checkbox" checked> Email updates</label>
<label><input type="checkbox"> Weekly digest</label>
</fieldset>
Selects and choices
<label for="plan">Plan</label>
<select id="plan" name="plan">
<option>Free</option>
<option>Personal</option>
<option>Team</option>
</select>
<fieldset>
<legend>Theme</legend>
<label><input type="radio" name="theme" checked> System</label>
<label><input type="radio" name="theme"> Light</label>
<label><input type="radio" name="theme"> Dark</label>
</fieldset>
Buttons
Buttons and input submit controls use the accent color by default. A disabled control is visibly muted.
<button type="submit">Save changes</button>
<button type="button" disabled>Unavailable</button>
<input type="submit" value="Submit input">
Validation
Native validation states use the browser’s :user-invalid pseudo-class. Invalid controls get a danger-colored border after the user interacts with them.
<label for="email">Email</label>
<input id="email" type="email" required>