Input

A styled input component

A hairline field in mono with a phosphor caret. Focus brightens the border instead of adding a ring.

Text input with 3 variants (outline, soft, ghost), 3 sizes (sm, md, lg) and 3 tones (neutral, success, danger) for validation states via border and focus ring color. Invalid state also via aria-invalid.

Displays a form input field or a component that looks like an input field.

A text input field for capturing user data.

A complete service-booking route with site chrome, scheduling, contact details, review, and confirmation.

An example messaging UI — a conversation list beside a live thread.

A high-trust contact section with context, inline validation, and a submitted state.

A complete customer workspace with responsive app chrome, filters, lifecycle stages, and notes.

A live event workspace with attendee search, attendance filters, summary counts, and working check-in.

An example feed — a composer and a stream of posts with reactions.

An example email inbox — a message list beside a reading pane.