Examples
Basic usage
<div class="stack">
<label for="demo-vol">Volume</label>
<input id="demo-vol" type="range" class="input" min="0" max="100" value="50" />
</div>
Size
<div class="stack">
<label for="demo-sm">Small</label>
<input id="demo-sm" type="range" class="input is-sm" min="0" max="100" value="25" />
<label for="demo-default">Default</label>
<input id="demo-default" type="range" class="input" min="0" max="100" value="50" />
<label for="demo-lg">Large</label>
<input id="demo-lg" type="range" class="input is-lg" min="0" max="100" value="75" />
</div>
Tick marks via <datalist>
<div class="stack is-tight">
<label for="demo-ticks">Volume</label>
<input
id="demo-ticks"
type="range"
class="input"
min="0"
max="100"
value="50"
step="5"
list="demo-tick-marks"
/>
<datalist id="demo-tick-marks">
<option value="0" label="Mute"></option>
<option value="25"></option>
<option value="50" label="Half"></option>
<option value="75"></option>
<option value="100" label="Full"></option>
</datalist>
<div class="cluster is-between text-muted text--1" aria-hidden="true">
<span>Mute</span>
<span>Half</span>
<span>Full</span>
</div>
</div>
State and interaction
<div class="stack">
<label for="demo-disabled">Disabled</label>
<input
id="demo-disabled"
type="range"
class="input"
min="0"
max="100"
value="40"
disabled
/>
</div>
Source comments
Input family -- text inputs, textarea, select, file, checkbox,
radio, and input-group. Atoms share a common chrome token set
(--input-border-color, --input-border-width, --input-radius,
--input-bg, --input-focus-color, --input-transition) so one override
on any ancestor retones the whole family.
Markup:
<form class="stack">
<div class="stack is-tight">
<label for="email">Email</label>
<input id="email" type="email" class="input" required>
</div>
<button class="button" type="submit">Submit</button>
</form>
Labeled checkbox/radio: <label class="cluster is-tight">
(Flex's anon-item rule means no span wrapper around text.)
<fieldset> + <legend> for groups; bare with base.css defaults.
Design notes:
- Validation states paint borders; error COPY is author-
responsible (<p class="text-danger"> adjacent, or page-level
<div class="alert is-danger" role="alert">). The automatic
paint is gated by :user-invalid -- it matches only after the
user has interacted with the control, so an empty required
field does not render invalid on page load. Engines without
:user-invalid keep the aria-invalid paint (the author-driven
one) and simply skip the automatic one; graceful degradation,
no feature query (P-stance on modern CSS).
- A required field inside the field-unit stack (label directly
before the control) picks up a CSS-drawn marker on its label --
form.css owns that rule. The full label / help / error
convention lives in the patterns section's field unit page.
- Checkbox/radio/range use appearance:none custom chrome for
visual parity with .input in dense forms. @media (forced-
colors: active) reverts to native rendering for all three.
- Select chevron is a pure-CSS two-gradient V per P8. Border-
rotate chevron (details, sidebar-nav) needs a pseudo, and
<select> doesn't accept pseudos in evergreen browsers
without appearance: base-select.
- .input uses :focus (not :focus-visible) because text entry
needs the ring on click for caret visibility. Checkbox and
radio use :focus-visible (no caret).
- .input-group default: group owns border/bg; children are
transparent. .is-joined reinstates per-child borders for
the classic shaded-endcap look.
Reference
Source: src/css/input.css
Applies to
input[type="range"].input
Classes
| Class | Kind | Description |
|---|---|---|
.is-sm | variant | Smaller track and thumb |
.is-lg | variant | Larger track and thumb |
Tokens
| Token | Default | Description |
|---|---|---|
--input-range-track-h | 0.375rem | Height of the range track |
--input-range-track-bg | var(--color-fill) | Background color of the range track |
--input-range-track-radius | var(--radius-pill) | Border radius of the range track |
--input-range-thumb-size | 1.125rem | Size of the range thumb |
--input-range-thumb-bg | var(--color-primary) | Background color of the range thumb |
Related: Input
The universal form-control class. One class covers every input type; each type shares the input appearance (border, radius, surface, focus ring) and adds its own shape below.
Source: src/css/input.css
Applies to
.input, .input-addon, .input-group, input[type="checkbox"].input, input[type="radio"].input
Classes
| Class | Kind | Description |
|---|---|---|
.is-sm | variant | Smaller text input with tighter padding |
.is-lg | variant | Larger text input with more padding |
Selectors
| Selector | Description |
|---|---|
input[type="file"].input | File input; padded shell around a styled native selector button |
textarea.input | Multi-line text; height comes from rows (or field-sizing), vertical resize only |
select.input | Native select; appearance:none with a CSS-drawn chevron |
Tokens
| Token | Default | Description |
|---|---|---|
--input-border-color | var(--color-border-stronger) | Border color shared across the input family |
--input-border-width | var(--border-width-default) | Border width shared across the input family |
--input-radius | var(--radius-md) | Border radius shared across the input family |
--input-bg | var(--color-surface) | Background color shared across the input family |
--input-focus-color | var(--color-focus) | Focus ring color shared across the input family |
--input-transition | var(--transition-fast) | Transition speed shared across the input family |
--input-height | 2.25rem | Block height for text inputs and select |
--input-padding-block | var(--ui-pad-block-compact) | Block-axis inner padding for text inputs and select |
--input-padding-inline | var(--ui-pad-inline-tight) | Inline-axis inner padding for text inputs and select |
--input-font-size | var(--ui-font-size-sm) | Font size for text inputs and select |
--input-line-height | var(--leading-tight) | Line height for text inputs and select |
--input-chevron-color | var(--color-text-muted) | Color of the select dropdown chevron |