Input
stable llms.txtFlexible input component with icons, placeholders, and all HTML input types.
Installation
Input.Root
The styled container — wrap every control with this
Why a compound component?
Input.Root is the shared styled shell. Every control lives inside one. Other components (dropdowns, selects) can reuse the same shell for visual consistency without rebuilding it.With Icon
Prefix or suffix any element using Input.Icon.
Preset Configuration
Customize the input appearance using presets
Text Controls
Plain text, password, search
TextControl
The standard text input. Prefer this over Input.Control for type='text'.
Password
Password input with show/hide toggle capability.
Search
Search text input with semantic markup.
Numeric Controls
Numbers and money
NumberControl
Numeric input with increment/decrement buttons and step.
CurrencyControl
Locale-aware currency input. Arrow Up/Down to increment (Shift×10, Alt×0.1).
Date & Time Controls
Segment-based pickers with keyboard navigation and rollover
TimeControl
12 or 24-hour segment picker with optional seconds and AM/PM.
DateControl
Segment-based date picker (YYYY-MM-DD). Day clamps to month boundaries.
DateTimeControl
Combined date + time picker with full rollover cascade across all segments.
Contact & Address Controls
Syntax-highlighted inputs for structured contact data
Highlight CSS variables
--input-hl-* CSS variables. Define them in your theme to enable color; omit them for plain monochrome text.EmailControl
Email with local / @ / domain / TLD segment coloring.
UrlControl
URL with protocol, host, path, search, and hash segment coloring.
PhoneControl
Masked phone input. # = required digit, [#] = optional. Segment map controls coloring.
LocationControl
Coordinate input (lat, lng) in decimal degrees or DMS. Optional geolocation button.
Media & Selection Controls
File upload, color picker, and verification codes
FileControl
File picker with accept filter and customizable trigger snippet.
ColorControl
Segmented CSS color editor. Auto-detects format from value. Pair with ColorSwatch for a live preview.
OtpControl
One-time password slots with keyboard navigation, paste support, and oncomplete callback.
API Reference
Compatibility
Components and patterns designed to work with the Input module
Works inside Input.Root
Input.TextControlPlain text input with bond wiring.
Input.PasswordControlPassword input with show/hide toggle.
Input.EmailControlEmail with local/domain/TLD segment coloring.
Input.UrlControlURL with protocol, host, path and hash coloring.
Input.PhoneControlMasked phone input with segment color map.
Input.NumberControlNumeric stepper with increment/decrement buttons.
Input.CurrencyControlLocale-aware currency input with formatted overlay.
Input.TimeControlSegment-based 12/24h time picker.
Input.DateControlSegment-based date picker.
Input.DateTimeControlCombined date + time picker.
Input.ColorControlCSS color editor with per-channel segments.
Input.ColorSwatchLive color preview — reads bond automatically.
Input.OtpControlOne-time password slot grid.
Input.FileControlFile upload trigger with custom snippet.
Input.LocationControlCoordinates input with lat/lng bindables.
Input.IconLeading or trailing icon slot.
Input.PlaceholderFloating overlay placeholder.
Related standalone components
Bond-free color preview square. Use outside of Input.Root when you need a standalone swatch. Input.ColorSwatch is its bond-connected counterpart.
Input.Root can act as a popover trigger for any dropdown — combine it with a Popover to build custom pickers, suggestions, or autocomplete panels.
Input.ColorControl handles raw color string editing.
Pair it with a full color picker popover for a visual hue/saturation canvas alongside the segment input.
Input.TimeControl provides keyboard-driven segment editing.
Pair it with a clock-face or scrollable time picker popover for mouse/touch selection.
Input.DateControl and Input.DateTimeControl handle typed date entry.
Pair them with a Calendar popover for click-to-select.
Accessible label element. Pair with Input.Root via htmlFor or by wrapping the input.
Wraps inputs with label, helper text, and validation messages. Designed to compose with any Input control.
Accessibility
- Proper label association with for/id
- Error message linking with aria-describedby
- Keyboard accessible
- Focus visible indicators
- Screen reader friendly