Text Input
A single-line text field for capturing user input. Supports labels, leading icons via iconStart, inline validation with danger and helperText, and contextual action buttons.
1<TextInput label="Full name" placeholder="Jane Smith" />
2
Usage
1import { TextInput } from "atlas";
2
3<TextInput
4 label="Full name"
5 placeholder="Jane Smith"
6/>
7
Examples
Default
The default
TextInput renders a single-line field with a label and optional placeholder.1<TextInput label="Full name" placeholder="Jane Smith" />
2
Search
Pass a component to
iconStart to render a leading icon inside the field. This is useful for search inputs where the icon reinforces the field’s purpose.1<TextInput
2 placeholder="Search…"
3 iconStart={<IconMagnifyingGlass />}
4/>
5
Shortcut hint
Use
shortcutHint to display a keyboard shortcut badge inside the input. Commonly paired with search fields to indicate a global shortcut.⌘K
1<TextInput
2 placeholder="Search…"
3 iconStart={<IconMagnifyingGlass />}
4 shortcutHint="⌘K"
5/>
6
With error
Set
danger to switch the field to its error state and provide helperText to explain what went wrong. Pair with required to mark the field as mandatory.Please enter a valid email.
1<TextInput
2 label="Email"
3 placeholder="you@example.com"
4 helperText="Please enter a valid email."
5 danger
6 required
7/>
8
Optional
Enable
optional to append an "Optional" badge next to the label, signaling that the field isn’t required.1<TextInput
2 label="Website"
3 placeholder="https://example.com"
4 optional
5/>
6
Read-only
Use
readOnly to let users view and copy the value without editing it. The field remains focusable but won’t accept changes.Generated on creation.
1<TextInput
2 label="API key"
3 defaultValue="sk-1234567890abcdef"
4 helperText="Generated on creation."
5 readOnly
6/>
7
Disabled
Set
disabled to prevent all interaction. The field is not focusable and its value won’t be submitted with the form.1<TextInput
2 label="Organization"
3 placeholder="Acme Inc."
4 disabled
5/>
6
API Reference
| Prop | Type | Default |
|---|---|---|
| label | string | - |
| placeholder | string | - |
| helperText | string | - |
| iconStart | ReactNode | - |
| actionButton | { icon: ReactNode; onClick: () => void } | - |
| shortcutHint | string | - |
| danger | boolean | false |
| disabled | boolean | false |
| readOnly | boolean | false |
| required | boolean | false |
| optional | boolean | false |
- Textarea for multi-line text input
- Input Group for composing labeled groups of inputs with shared context
- Combobox for text input with autocomplete suggestions