Collect data with clarity and control.
Input primitives cover actions, text entry, selection, grouped controls, and form semantics. Compose them to create robust flows across mobile, tablet, and desktop experiences.
Button
actionsInput
text entrySelect
choicesField
form semanticsButton
Buttons communicate intent and hierarchy. Tune variant, color, size, icon, and loading state to match action priority and keep interaction predictable.
Variants + Colors
Icon + State
Input
Input supports variant styles, size scale, content slots, and status messaging for everyday form data capture.
Variant + Size
Slots + States
Textarea
Textarea captures longer messages, notes, and descriptions with count support, status styles, and disabled/read-only states.
General
Validation + Count
Checkbox
Checkbox is ideal for yes/no flags and non-exclusive options with indeterminate, disabled, color, and size control.
Core States
Variants + Colors
CheckboxGroup
Group checkboxes with shared state, horizontal or vertical layout, and optional parent-select behavior for quick bulk selection.
Vertical + Parent
Horizontal + Styles
Switch
Switch is best for immediate on/off preferences and feature toggles with fast visual feedback.
Interactive
Size + Disabled
Toggle
Toggle is a two-state button for formatting and preference flags. Use icon-only for compact bars and labeled variants for clearer contexts.
Variants
Icon Only + Size
RadioGroup
RadioGroup enforces one selected value. It works for mode pickers, plan selectors, and compact preference controls.
Vertical
Horizontal + Color
ToggleGroup
ToggleGroup supports both single and multi-select behavior for compact command bars.
Single Selection
Multiple + Labeled
Slider
Sliders provide quick numeric adjustments for values and ranges with marks, sizing, and color customization.
Interactive
Modes
NumberInput
NumberInput combines typed entry with spinbutton controls for bounded numeric values.
Base
Size + Disabled
Select
Select provides a structured listbox for controlled option picking via flat and compound APIs.
Flat API
Compound API
Autocomplete
Autocomplete filters options as users type, enabling fast discovery in larger datasets.
Basic
State
OTPField
OTPField supports secure one-time code entry with auto-advance and paste-friendly behavior.
Formats
State + Size
Field
Field unifies label, description, required marker, and error messaging with proper accessibility wiring.
Flat API
We will never share your email.
Password must be at least 8 characters.
Compound API
Must be unique and 3-20 characters.
This username is already taken.
Select your country.
Fieldset
Fieldset groups related controls with native legend semantics, shared validation, and disabled propagation.
Flat API
Compound API
Label
Labels are rendered through `Field.Label` and inherit required, disabled, and validation context from `Field.Root`.
Standalone Label States
With Controls
Rating
Rating shows display-only scores with decimal fills, color themes, and custom max values.