Inputs

A single-line input with the label hidden, set over a single hairline. The 16px text prevents iOS input zoom; focus keeps the baseline and adds a currentColor outline without shifting layout.

A boxed variant with a 15% ink hairline and the same 16px entry text. Keyboard focus draws inside the square edge without a shadow.

Multi-line versions of the fields above, in the same underline and ghost styles. Each has a 10svh minimum height and resizes vertically only, so the width never changes.

A native checkbox under a 15px hairline square. Checking fills it with ink behind a currentColor paper check; a native mixed state uses a horizontal paper mark. Hover dims the row. The visible mark stays compact while the full label row meets the 44px target floor.

Native radio inputs under square hairline marks. The group is a real fieldset with a small uppercase legend and a shared input name, so arrow-key navigation comes from the platform.

A styled native select. The platform popup is unchanged, so accessibility comes from the browser. Squared and hairline-bordered, with 16px text, a 44px floor, and a currentColor chevron over the right padding.

A two-state toggle with a square track instead of a pill. The track is the checkbox itself; a square knob slides across it, and the track fills with ink when on. Optional state labels swap in via CSS only.

Minus and plus buttons flank a tabular-nums value in one shared hairline box. Typed edits stay in a draft and commit on blur or Enter; the buttons dim when they reach the min or max.

A native range input restyled to match the system: a 1px hairline track, a solid square ink thumb, and an offset focus ring. Keyboard behavior comes from the platform.

An underline field inside a role="search" form with an uppercase submit and a two-bar clear that restores focus. Wire onSearch, or omit it and let the form navigate as plain GET.

A text field with an ARIA listbox: substring filtering stays in the input, arrows move the active option, Enter commits, and Escape closes. The popup enters in 300ms and exits in 200ms with a reduced-motion fallback. This is an input primitive, not an overlay family duplicate.

Groups form fields under a hairline top rule with a small dim mono legend, children stacked beneath. FieldLabel is the standalone visible label component for building custom rows.

A 16px email input and ink submit sharing one square hairline — a single bar, not two separate controls. Focus within draws an inset outline; the submit self-dims. Submit below to see the announced confirmation state.

Success and error render as paper-colored blocks with a small mono state label. Error keeps the same hairline but raises it from /15 to /60 ink instead of introducing a tint or changing geometry.

Three underline segments — DD / MM / YYYY — that auto-advance as they fill and step back on Backspace. The change callback only ever emits a complete, calendar-valid ISO date, or an empty string while partial. A complete impossible date is identified and explained in place.

An inline month grid built entirely from hairlines: mono tabular numerals, ink fill on the selected day, and a ring on today. Arrows move by day, PageUp/PageDown move by month, and Home/End jump to the start or end of the week. Min/max bounds clamp keyboard focus and disable unavailable dates.

No color wheel: a mono hex field beside a live hairline-bordered swatch. Valid entries are normalized to lowercase #rrggbb; invalid ones keep the last color, set aria-invalid, and show a monochrome error. Presets keep an 18px mark inside a 44px target.

No stars: a row of 13px squares, filled cumulatively with ink. Interactive mode is a native radio group — one tab stop, arrows to move — and readOnly renders a static labelled figure.

A boxed, labeled input that the Field kit deliberately leaves out — the Field kit stays underline/ghost-only, so TextField adds the box, error, and helper text that product and settings forms need. The hairline box gains a currentColor inset outline on focus; error uses ink, never red, sets aria-invalid, and owns the active description. Leading and trailing slots hold a prefix, unit, or small action at the /60 readability floor.

A read-only display for an API key, token, or password. It’s masked by default behind a fixed-length run of characters, so a hidden secret never leaks its real length. An eye toggle reveals it, and a guarded copy button is available. The value is set in monospace and scrolls inside the box instead of widening it. Reveal state can be controlled or uncontrolled; the hint line can carry a one-time-secret warning. The display has read-only textbox semantics, and successful copy is announced politely.

A presentational segmented meter. The host computes the score; this component only renders segments squared bars and fills the proportion represented by the 0–4 score. Fills use companion tints in order (clay → ochre → slate → sage) and fall back to ink where the host hasn’t defined that color token, so strength stays readable by bar count alone. The demo maps input length to a 0–4 score locally, so the row updates as you type.

A data toolbar that sits above a table. The top row pairs a SearchField and facet controls on the left with a right-aligned actions slot. Once filters apply, a second row appears below a hairline: squared chips with × removers plus a “Clear all” button when its callback is supplied. It’s slot-driven: the chips call the onRemove you pass, so no filter state lives inside.