Input
A text field with an optional label, icons, hint, and error message.
Basic usage
A labeled field. required sets the native attribute and draws no marker, so say in the label or hint when a field is optional.
Sizes
Three sizes: mini, small, and regular (the default).
States
Default, disabled, read-only, and error. errorMessage shows below the field while error is true and is linked to it for screen readers. Type a domain with a dot to clear the error.
With icons
iconStart and iconEnd take an icon name, an icon descriptor, or a node. Set onEndIconClick and endIconLabel to turn the end icon into a button, such as a show-password toggle.
Form example
Controlled inputs with hints, laid out in a responsive grid.
With suggestions
SuggestionInput wraps Input with a filtered suggestions dropdown. Import it from @repo/design-system/components/primitives/form/suggestion-input; it accepts every Input prop except standalone and fieldOverlay, plus suggestions, onSuggestionSelect, maxSuggestions (default 6), renderSuggestion, and forceShowDropdown (skeleton rows while loading).
Properties
Label text for the input field
Content shown at the end of the label row
Placeholder text when input is empty
HTML input type (text, password, email, etc.)
Default: text
Size of the input
Default: regular
chromeless drops the field's own surface so it takes on the surface it sits on
Default: control
Renders the native input as the surface itself, with no wrapper. Cannot be combined with icons, preInputNode, fieldOverlay, or inputWrapperClassName
Default: false
Whether the input is disabled
Default: false
Whether the input is read-only
Default: false
Whether the input is required
Default: false
Whether to display the input in error state
Default: false
Error message shown below the input while error is true
Icon name, descriptor, or node at the start of the input
Icon name, descriptor, or node at the end of the input
Callback fired when the end icon is clicked; renders the end icon as a focusable button (requires endIconLabel)
Accessible name for the end icon button; required when onEndIconClick is set
Node rendered before the input element
Content anchored to the field surface, such as a suggestions popover
Helper text displayed below the input
Controlled input value
Callback function to handle input change
Callback function to handle input focus
Callback function to handle input blur
Callback function to handle input key down
Whether to auto focus the input
Default: false
Whether to auto complete the input
Default: off
Additional CSS classes to apply to the input container
Additional CSS classes to apply to the input element
Additional CSS classes to apply to the input wrapper
Native field ID. Generated when omitted; inputRest.id takes precedence
Name attribute for the input
Marks the input as a native clipboard source for surrounding shortcut scopes
Extra props spread onto the native input element