Input

Intent

Input is a family of form controls that share a chrome token spine. .input is the universal class for the family: text <input>, <select>, <textarea>, plus <input type="checkbox">, <input type="radio">, <input type="checkbox" role="switch"> (toggle), and range. Each element type renders its own chrome (text rectangle, checkbox tick, radio dot, switch track, slider track and thumb), but they share --input-* tokens so dense forms feel visually unified. .input-group joins inputs with icons, addons, or a button inside a single shared border.

Basic usage

Add .input to the native element and pair it with a <label>. brio has no .form or .field wrapper class -- <form class="stack"> and nested <div class="stack is-tight"> cover the layout. For real-world form patterns (stacked, horizontal, multi-column, sectioned with fieldsets), see Form composition.

Native <fieldset> and <legend> work bare with base defaults -- reach for them when grouping radios or checkboxes.

Variants

Size

Sizes key to the ui-pad-* density grammar. .is-sm tightens padding and drops the font one step; .is-lg relaxes padding and steps the font up.

State

Validation paints the border red in two ways: :invalid:not(:placeholder-shown) covers client-side feedback after a user has typed; [aria-invalid="true"] covers server-rendered or JS-set invalid state. Pair either with adjacent error copy in a <p class="text-danger">. :disabled dims the input and swaps to a sunken background. :focus shows the ring on click AND keyboard -- text entry needs the ring to indicate where the caret will land, so the asymmetry with button's :focus-visible is deliberate.

Readonly vs disabled. readonly keeps the value selectable and submittable but blocks edits; disabled greys it out and excludes it from form submission. Pick by intent. A readonly field keeps its normal chrome; only the caret and interaction are suppressed.

Help text. A short <p class="text-muted text--1"> below the input gives context (format hints, character limits, privacy notes). Wire it with aria-describedby so screen readers announce it after the label.

Success state is opt-in. brio doesn't paint a green :valid border by default -- a field that happens to pass validation while the user is still typing shouldn't announce success every keystroke. If your form design calls for it, opt in per-form:

.my-form .input:valid:not(:placeholder-shown) {
    --input-border: var(--color-success);
}

Native types

Every text-shaped input type works with .input -- email, password, search, tel, url, number, date, datetime-local, month, time, week. Browser- supplied pickers (date, time) inherit the surrounding chrome; the picker chrome itself is browser-drawn.

Range and color. type="range" takes .input and gets brio's slider chrome -- track, thumb, and size variants. See range for the dedicated page. type="color" is left unclassed: brio doesn't currently style the swatch picker (the browser- drawn chrome varies considerably across platforms and the consumer cases are rare).

Textarea

<textarea class="input"> uses block-size: auto so the rows attribute controls height. A handful of sizing patterns cover most needs -- pick per context:

• Fixed rows. The default. rows="4" renders a four-line textarea; the user can drag the resize handle to grow it vertically.
• Fill container. Set a height on the wrapper and block-size: 100% on the textarea. Useful for editor panels, comment boxes in a sidebar, notes that should occupy all available vertical space.
• Grow with content. field-sizing: content auto-grows the textarea as the user types, eliminating the need for JS height-management. It ignores rows, so set min-block-size for the starting height. Baseline modern CSS.

Select

<select class="input"> replaces the native dropdown arrow with a CSS-gradient chevron themed by --input-chevron-color.

File

input[type="file"].input styles the native file-selector button with the family's chrome. Leave the button label to the browser -- consumers can't restyle the selected-filename text.

Checkbox and radio

Checkbox and radio use appearance: none custom chrome consuming the spine -- the unchecked box matches .input's border and background, checked state fills with --input-check-accent, and the tick or dot paints in --input-check-color. Windows High Contrast and other forced-colors modes revert to OS-rendered controls automatically.

For a labeled control, put .cluster.is-snug on the <label>. No wrapper <span> around the text is needed -- flexbox treats loose text inside a flex container as an anonymous flex item, so it aligns with the control automatically.

Multi-line labels. When label text wraps to multiple lines, reach for .media instead of .cluster. .media's figure-and-body shape aligns the checkbox with the first line of text (via align-items: flex-start) and lets the wrapped text flow beside it. Tighten --media-gap from the relaxed default to close the checkbox-to-text distance:

:indeterminate state on checkbox shows a short horizontal bar instead of a tick. It can only be set from JavaScript -- there's no HTML attribute for it:

document.getElementById("parent-check").indeterminate = true;

:indeterminate also matches every radio in a group with no selection yet -- that's a CSS spec quirk, not a bug. brio's radio rules scope the filled-state styling to :checked only so fresh groups render as empty circles.

Toggle switch

Checkbox with role="switch" renders as a track-and-thumb instead of a box-and-tick. Same input family chrome (border color, focus ring, disabled state); the thumb slides across the track on :checked. Screen readers announce it as a switch (on/off) rather than a checkbox (checked/unchecked).

Labeled pattern matches checkbox and radio -- .cluster.is-snug on the <label>:

Input groups

.input-group joins an input with icons, addons, or a button in a single shared border. The group owns the border, background, and focus ring; the input inside goes transparent. Addons and buttons sit inside the shared border and read as part of the same control.

Focus routes through :focus-within on the group, so tabbing into any child lights the outer border and ring. Validation state on any inner input paints the group's border red via :has(). When a child input is disabled, the group inherits its dim state naturally.

.input-addon marks a child as a label or icon inside the group. In the default shape, addons have muted color and transparent background -- they sit inside the group's border alongside the input. Buttons inside the group lose the border-radius on the side facing the input so they sit flush; the outer side rounds naturally via the group's overflow: hidden clipping.

Validation

Any inner control's :invalid:not(:placeholder-shown) or [aria-invalid="true"] propagates to the group's border via :has(), so the red border surrounds the entire chrome -- addons, input, button alike. Pair with adjacent error copy via aria-describedby.

Classic shaded endcaps

Add .is-joined to the group for the classic bordered-everything-with-shaded-endcaps look. Each child gets its own border; addons get a sunken background; the focused input rises above its neighbors.

Form composition

The input family pairs with brio's composition primitives to build real forms. .stack handles vertical rhythm (not .flow -- forms want tiered spacing and flex alignment, which stack provides and flow doesn't). .cluster handles horizontal rows and action bars. .grid or .switcher handles paired fields. A few common shapes cover most forms.

Stacked (canonical)

The default. Outer .stack separates fields at its default gap; inner .stack.is-tight ties each label, input, and optional help or error together. Submit button sits at the end as a sibling of the field wrappers.

Horizontal

A single field-and-action pair on one line. .cluster.is-snug on the form puts label, input, and button side by side and wraps on narrow viewports. For the input-plus-button-only shape without a visible label, reach for .input-group -- the joined border reads as a unified control.

Multi-column fields

Pair short fields that logically belong together (first/last name, city/state/zip) using .grid for a fixed minimum column width or .switcher for columns-to-stack at a threshold. Each grid cell holds a .stack.is-tight field.

The grid's --grid-min sets the minimum column width before wrapping. Set it in a demo class (above) or a consumer utility; the grid's behavior is responsive without media queries.

Sectioned with fieldsets

Group related controls with <fieldset> and a <legend>. Each section is its own .stack.is-tight; sections sit inside the outer form's .stack. An action bar at the bottom uses .cluster.is-end for trailing buttons or .cluster.is-between for left/right splits (cancel on the left, save on the right).

Class reference

• .input -- base class for <input>, <select>, and <textarea>. Checkbox and radio get custom chrome without the class.
• .is-sm, .is-lg -- size variants. Remap the element-specific sizing tokens.
• .input-group -- wrapper that joins children in a shared border. Default is the modern unified shape.
• .is-joined (on .input-group) -- classic shaded-endcap variant with per-child borders.
• .input-addon -- label, icon, or unit inside an .input-group.

Customization

The family shares a chrome spine -- --input-border, --input-radius, --input-bg, --input-focus-color, --input-transition -- declared on every family member. Override any of these on a form ancestor (or any wrapper) and every input, addon, group, checkbox, and radio inside retones together. Element-specific tokens (--input-height, --input-padding, --input-chevron-color, --input-check-accent, etc.) stay scoped to their element. Size variants remap only the .input-specific sizing tokens.

Full token list and defaults: src/css/input.css.

Accessibility

• Always label the control. Every <input>, <select>, and <textarea> needs an associated <label> -- either via for=/id or by nesting. The label-above-input shape inside .stack.is-tight is brio's canonical form rhythm; radios and checkboxes go inside a <fieldset> with a <legend>.
• Pair validation state with error copy. The red border signals invalid state visually; screen readers need the reason. Use aria-invalid="true" on the control plus an adjacent <p class="text-danger"> referenced by aria-describedby. For page-level summaries, surface errors in <div class="alert is-danger" role="alert">.
• Focus rings behave differently by control type. Text inputs use :focus so the ring shows on click and keyboard alike -- the caret needs to be visible where it lands. Checkbox, radio, and select use :focus-visible (keyboard only); they have no caret, so a ring on click would be noise.
• Forced-colors mode is covered. Checkbox and radio revert to native rendering inside @media (forced-colors: active). Windows High Contrast and similar modes paint OS-drawn controls so system colors take over automatically.
• Dim disabled labels yourself. A disabled control dims its own chrome via opacity. The surrounding label text stays at full opacity unless you wire it: .my-label:has(:disabled) { color: var(--color-text-muted) } on the label wrapper covers the common case.
• Use proper autocomplete tokens. Browser autofill and password managers rely on autocomplete="email", "current-password", "street-address", etc. Using the right tokens is an accessibility win -- users with motor impairments benefit disproportionately from working autofill.

CSS Reference: Input

Styled form input for text, select, textarea, checkbox, radio, and range

Source: src/css/input.css

Tokens

Classes

CSS Reference: Input Group

Joins inputs with addons or buttons

Source: src/css/input.css

Slots

Classes