# Inputs

> Frame input components with live states: TextField, SearchBox, AutocompleteField, RangeSlider, Switch, SegmentedToggle and Checkbox.

Web page: https://system.beibeidesign.com/components/inputs/

### TextField

Master Used in: Wingman 11 · WorkPal 3

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

Display name

[field: What should we call you?]

Email

`not-an-email`

Email must contain @

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

| variant ↓ / state → | default | focus | error |
| --- | --- | --- | --- |
| empty | [field: Enter text…] | [field: Enter text…] | [field: Enter text…] Required field |
| filled | `Sample input` | `Sample input` | `Sample input` Required field |

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

### SearchBox

Master Used in: Wingman 0 · WorkPal 5

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

[field: Search the system]

Search the system

### AutocompleteField

Master Used 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

`San Francisco Bay Area`

### RangeSlider

Master Used in: Wingman 2 · WorkPal 0

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

Age range 25-40

Distance 25 miles

### Switch

Master Used 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.

Active Inactive

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

| variant ↓ / state → | default | disabled |
| --- | --- | --- |
| left | Left Right | Left Right |
| right | Left Right | Left Right |

### SegmentedToggle

Master Used 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).

EN 中

List Grid

### DarkToggle

Master Used 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.

Switch to dark mode 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 Switch to dark mode

Bordered · batch / same layer

P0 P1 P2

### Checkbox

Master Used in: Wingman 0 · WorkPal 4

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

Sync to GitHub Push merge to origin/main Run smoke tests ~40s on Vercel preview Disabled option

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

| variant ↓ / state → | default | disabled |
| --- | --- | --- |
| unchecked | Off | Off |
| checked | On | On |