Inputs — Frame AI Agent UX/UI Design System

TextField

#MasterUsed in: Wingman 11 · WorkPal 3

Filled labeled text input. Pass `error` for inline validation. `autoComplete` for browser keychain hints.

Display name

Email

Email must contain @

Variant × state matrix (2×3 = 6 cells)

variant ↓ / state →	default	focus	error
empty			Required field
filled			Required field

focus state shows the canonical 2px ring; live focus inside the input is identical.

SearchBox

#MasterUsed in: Wingman 0 · WorkPal 5

Responsive search field. Desktop: always-expanded pill. Mobile: icon-only that expands to a fullscreen overlay on tap.

AutocompleteField

#MasterUsed in: Wingman 3 · WorkPal 0

Filled combobox with suggested options and custom-value fallback. Use when the system can help match entries but should not block freeform input.

City

RangeSlider

#MasterUsed in: Wingman 2 · WorkPal 0

Token-styled native sliders. Use RangeSlider for a single value and DualRangeSlider for bounded ranges.

Age range25-40

Distance25 miles

Switch

#MasterUsed in: Wingman 1 · WorkPal 4

Binary radio-pill toggle. Generic over the value type. Use for two mutually exclusive choices that aren't toolbar-scale.

Variant × state matrix (2×2 = 4 cells)

variant ↓ / state →	default	disabled
left
right

SegmentedToggle

#MasterUsed in: Wingman 0 · WorkPal 4

Compact pill segmented control for 2–4 mutually-exclusive options (language EN/中, view mode). Separated-pill style — distinct from ToolbarSegmented (composer connected segments) and Switch (binary). variant='flat' (selected-bg) or 'gradient' (brand fill).

DarkToggle

#MasterUsed in: Wingman 1 · WorkPal 1

Recessed-track + raised-thumb switch — a filled inset groove (no border) with the active option lifted onto a near-surface pill. The 'stands on its own layer' style; use for a single, emphasized binary control (e.g. light/dark mode). For same-layer or repeated/batch controls (e.g. per-row priority) use the lighter bordered SegmentedToggle instead.

Recessed track + raised thumb — a filled inset groove, no border (bg-XOR-border).

When to use which toggle

A · Visual layer

Sits on the SAME layer as content → bordered SegmentedToggle. Needs its OWN / a receded layer → inset DarkToggle.

B · Quantity

Many / repeated (e.g. per-row priority) → bordered (lighter). Single / emphasized → inset.

Inset · single / emphasis

Bordered · batch / same layer

Checkbox

#MasterUsed in: Wingman 0 · WorkPal 4

Independent boolean (NOT a radio group). Multiple can be checked at once.

Variant × state matrix (2×2 = 4 cells)

variant ↓ / state →	default	disabled
unchecked
checked