Form components
Every control a form needs, from a plain text input to a searchable multi-select, a date range picker and a one-time code field. They share one field system for labels, descriptions and errors, so validation reads the same everywhere.
Inputs stay at 16 pixels on touch screens so iOS never zooms, invalid fields can shake to draw the eye, and every control works with the keyboard alone.
- Calendar
- Checkbox
- Combobox
- Date picker
- Field
- Input
- Input group
- Input OTP
- Label
- Native select
- Questionnaire
- Radio group
- Select
- Slider
- Switch
- Textarea
- CalendarA date grid for single, range and multiple selection, with sliding months, range previews and touch-sized days.
- CheckboxA checkbox whose check draws in, with indeterminate parents, groups and labels that share its hover.
- ComboboxA filterable select with chips, groups and async results, in a popup that resizes as you type.
- Date pickerA button that opens a calendar in a popover, or a bottom sheet on phones, for single dates and ranges.
- FieldLabels, descriptions and errors wired to their control, with validation states and layouts for forms.
- InputA text input with three sizes, invalid and read-only states, native validation styling and a 16px touch font so phones never zoom in.
- Input groupAn input with icons, text, buttons or a keyboard hint attached, sharing one border and focus ring.
- Input OTPOne-time code slots that take typing, paste and SMS autofill, with an opt-in animation that cascades codes in and a status for verifying.
- LabelA label that follows its control, dimming when it's disabled and marking it required or optional on its own.
- Native selectThe browser's own select, styled to match Input, with a quiet placeholder, Field support and the OS picker on every device.
- QuestionnaireA step-by-step form that moves between questions with a sense of direction, shows real progress and answers from the keyboard.
- Radio groupPick one option from a set, with a dot that hands off between choices and cards whose selection ring slides to the new pick.
- SelectPick one or more options from a list that opens on the current value, with typeahead, groups and form support.
- SliderPick a value or a range by dragging, tapping the track or using the keys, with jumps that glide and an optional value bubble.
- SwitchAn on/off toggle you can tap, press or drag, with a thumb that stretches under your finger and an optional pending state for saves.
- TextareaMulti-line text that grows smoothly with what you write between a minimum and maximum number of rows, with counters, validation and a submit shortcut.
Built into Pro blocks
Blocks for AI products that are built from these components.
- MarkdownMarkdown rendering for AI answers. Handles streaming without half-typed syntax, tables you can copy and inline citations.
- API keysThe API keys page of an AI product. Handles a secret shown only once, revoke with undo and rotation with a grace period.
- NotificationsThe Notifications section of an AI product’s settings. Handles a channel by event grid, quiet hours and browser permission for push.
- SecurityThe Security section of an AI product’s settings. Handles sessions, two-factor with recovery codes and deletion behind a typed confirmation.
- BillingThe plan and usage page of an AI product. Handles credits running out mid-cycle, plan changes with proration and card errors.
- ModelsThe Models page of an AI product’s settings. Handles the default model and effort, providers and custom servers with a connection test.