Input

Text fields, checkboxes, and toggles on one field contract: sizes, surfaces, and validation states.

Table toolbar search

useDebounce waits for a pause in typing before it narrows the list

8 catalogs

AC Delco Q3
Brake & Chassis
Lighting SKUs
Filters (May)
Timing Components
Ignition Systems
Suspension Parts
Cooling Systems

Settings form

A required field that validates on blur, plus disabled and readonly rows

Display name

Shown to teammates in the workspace

Plan

Workspace ID

Presets

email, password, search, url, numeric: the field shapes both apps kept spelling out, as one word each; explicit props win

Password

Website

Max pages per part

pages

Numeric field with a unit

presets="numeric" plus the unit prop: decimal keypad, tabular right-aligned figures, the unit behind the value

Diameter

≈ 45.7 cm

Filters panel

A checkbox group and a toggle row, both narrowing the same list live

Login form footer

Submit stays disabled until the email and password both validate

Password

At least 8 characters

Three field shapes

element switches between input, textarea, and checkbox

Text

Textarea

Checkbox

Toggle

Icons and suffixes in the frame

before and after put content inside the field without breaking its layout

Prefixed

Suffixed

.com

Email me updates

Label and helper text

top and bottom caption the field above and below; required adds the asterisk

Name

As it appears on your ID

Coupon

API key

Five sizes

size and textSize scale independently

Outline, flat, or shadow

surface controls how the field's edge is drawn

Outline

Flat

Shadow

Error, changed, disabled, readonly

The states a field moves through outside plain editing

Error

Invalid value

Error (custom)

Must be a valid email

Changed

Disabled

Readonly

Hide instead of gray out

hideIfDisabled renders null entirely once the field is disabled

(Nothing renders above: the field returned null.)

Same chrome around a custom control

InputContainer wraps the label/error frame around a control it doesn't own

Custom control

Read-only

Disabled

Styling slots

Every className the component exposes, and what it reaches

className: the native input or textarea element
_className: the outer container
labelClassName: the field's frame holding before, control, and after
beforeClassName: the leading before slot
afterClassName: the trailing after slot
topClassName: the label-above row
bottomClassName: the helper-text row below the field
errorClassName: the error message text