Cualquier flujo de captura — agendamiento, checkout, lead, auth — sale de acá. Wrappers, inputs de texto, controles de selección, y casos especializados.
La capa meta que envuelve cualquier control con label, helper text y manejo de errores. Empieza acá para entender cómo se etiqueta el resto.
We will never share your email.
Must be at least 8 characters.
Guidelines
When to use
Wraps non-text inputs (Select, Textarea, Combobox, RadioGroup, Checkbox); also wraps text Input for forms with per-field helper text where label-above breathes better — admin/settings, complex multi-section forms, filter/search.
When not to use
Don’t wrap FloatingInput in Field — it already renders its own label.
Entradas de texto con la variante adecuada según el contexto del formulario — desde la primitiva pelada hasta los inputs flotantes y agrupados.
Three heights to fit different surfaces — compact toolbars, default forms, and prominent flow inputs.
Small
Filters, search bars, dense tables
Default
Standard forms and most checkout fields
Large
Hero forms, landing CTAs, mobile-first flows
How the input responds to user intent and authoring lifecycle.
Empty
Awaiting input — placeholder shows the expected format
With value
User has typed — the typed text is the dominant signal
Disabled
Action unavailable — no border, muted fill
Read-only
Value is locked but visible — used for derived or pre-filled fields
Native HTML input types — same component, the right keyboard and constraints per use case.
Password
Hidden characters, password manager integration
Number
Numeric keypad on mobile, step controls on desktop
Email keyboard layout, native @-validation
Search
Adds the platform clear button on most browsers
Tel
Phone keyboard on mobile — pair with CountryPhoneInput for full UX
URL
URL keyboard with .com shortcut on mobile
Guidelines
When to use
Filter/search where the label sits outside the field, or as the input primitive inside StackedInput / InputGroup. For form data entry, prefer FloatingInput (consumer flows) or Field + Input (admin/settings, complex forms with helper text).
When not to use
Don’t use Input alone for forms when a FloatingInput or Field is more appropriate — Input has no built-in label.
Sizes
Small
Default
Large
States
Empty
With value
With hint
Include country code
With error
Enter a valid email address
Disabled (empty)
Disabled (filled)
Guidelines
When to use
Consumer product flows — booking, checkout, lead capture, auth. The default for stacked plain text inputs.
When not to use
For inputs that need rich label-above context (helper text per field, complex validation hints), use Field + Input. Never for CountryPhoneInput, InputGroup, StackedInput members, or FileUpload — they have their own label patterns.
Don't
Wrap FloatingInput in a Field — it already renders its own label.
Guidelines
When to use
Settings or configuration panels — preferences, account info management, in-app option groups where related controls bundle into one bordered shelf. The pattern is "manage values" more than "submit data".
When not to use
For forms (signup, checkout, lead capture), use separate fields — each gets its own border, label, helper text, error state. Don’t force address into StackedInput by default.
Don't
Use StackedInput for short side-by-side fields like CVV + expiry — that’s an inline 2-column grid, not a stack.
Guidelines
When to use
A single input with prefix/suffix addons — leading/trailing icon, attached button, currency text, search clear icon. The addon and input share one container.
When not to use
Don’t use for grouping multiple inputs — that’s StackedInput (settings) or separate fields (forms).
Three minimum heights — content auto-grows beyond them as the user types.
Small
Inline notes, compact comment fields
Default
Standard message and description fields
Large
Long-form descriptions, support tickets, reviews
Same lifecycle as Input — empty, filled, disabled, read-only.
Empty
Awaiting input — placeholder shows expected content
With value
Auto-grows as the user types more lines
Disabled
Action unavailable — no border, muted fill
Read-only
Value locked but visible — used for derived or pre-filled fields
Elegir uno o varios valores entre un set de opciones — desde el select clásico hasta la selección con búsqueda o fecha.
Three heights matching Input — pick the size that aligns with the surrounding form rhythm.
Small
Filters, dense tables, inline controls
Default
Standard forms and most checkout fields
Large
Hero forms, landing flows, mobile-first selectors
How the trigger reflects selection lifecycle and availability.
Empty
Placeholder shows the expected choice
With value
User picked an option — value replaces placeholder
Loading
Async data still resolving — chevron swaps for spinner
Disabled
Action unavailable — no border, muted fill
Guidelines
When to use
Picking a value for a form — country, plan, vehicle make. The trigger shows the current value, opening reveals options, picking commits a value. Pair it with a label-above wrapper, either via a dedicated field pattern or an explicit Label + SelectTrigger pairing.
When not to use
Not for "view as grid / list" toggles (use SegmentedControl), many-options filters (use chip group), or action menus (use DropdownMenu).
With value
Empty
Single date
| lu | ma | mi | ju | vi | sá | do |
|---|---|---|---|---|---|---|
Date range
| lu | ma | mi | ju | vi | sá | do |
|---|---|---|---|---|---|---|
Guidelines
When to use
Forms where the choice is structured data entry — "Condición del vehículo: Nuevo / Usado / Dañado", "Tipo de servicio". Each option gets a label-above-control treatment, often with a description. Lives inside Field.
When not to use
Not for view toggles (use SegmentedControl) or filters where many can be on (use a multi-select chip group).
Two sizes — pick the one that matches the surrounding form rhythm and tap target needs.
Small
Dense lists, compact filters
Default
Standard forms and most checkout flows
Selection lifecycle and availability.
Unchecked
Default — no selection yet
Checked
User opted in
Disabled
Action unavailable — muted opacity
Casos con UX o validación propia — paste con prefijo de país, drop-zones para archivos. No los envuelvas en wrappers genéricos.
Invalid phone number
Guidelines
When to use
Phone number input in any form. Always uses Field-style label-above, never floating — the country flag + dial code prefix would compete with a floating label.
When not to use
Don’t wrap in FloatingInput or duplicate a Field around it — it has its own label pattern.
Upload photos
Hasta 3, desde varios ángulos
Guidelines
When to use
Drag-and-drop or click-to-upload for images and documents. Uses its own dropzone label pattern — never wrap in FloatingInput.
When not to use
Don’t use for single-file URL inputs or paste-link patterns — that’s an Input.