Input
DraftA single-line text input with multiple sizes, leading/trailing slots, and FormControl integration.
- Usage
- Specs
- Content
- Status & changelog
- Code
Common alternative names
Input, text input, text box
Anatomy
An input is composed of a label, character count, leading and trailing enhancer slots, placeholder text, and an optional hint. The enhancer slots support multiple content configurations.
(Optional)
(Optional)
(Optional)
(Optional)
(Required)
(Optional)
Leading enhancer (optional)
Trailing enhancer (optional)
Leading + trailing enhancer (optional)
Content types (optional)
Usage guidelines coming soon.
Specs coming soon.
Content guidelines coming soon.
Status & changelog coming soon.
Usage
Import and use Input from the component library.
import { Input } from '@arch-ui/components';
<Input type="email" placeholder="you@example.com" />
Inside FormControl
When placed inside a FormControl, the Input automatically inherits the field id, required state, disabled state, invalid state, and aria-describedby wiring.
import { FormControl, FormLabel, FormErrorMessage, Input } from '@arch-ui/components';
<FormControl id="email" required invalid={hasError}>
<FormLabel>Email</FormLabel>
<Input type="email" />
<FormErrorMessage>A valid email is required.</FormErrorMessage>
</FormControl>
With leading and trailing elements
Use leftElement and rightElement to place icons or other decorative content.
<Input
leftElement={<SearchIcon />}
placeholder="Search..."
/>
Clearable
Show a clear button when the input has a value.
<Input
clearable
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Search..."
/>
Sizes
| Size | Min height | Font scale |
|---|---|---|
xs | 28px | Paragraph XSmall |
sm | 36px | Paragraph Small |
md (default) | 48px | Paragraph Medium |
lg | 56px | Paragraph Large |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'text' | 'email' | 'password' | 'number' | 'search' | 'url' | 'tel' | 'text' | HTML input type. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Size variant controlling height, padding, and font size. |
leftElement | ReactNode | undefined | Node rendered in the leading (inline-start) slot. |
rightElement | ReactNode | undefined | Node rendered in the trailing (inline-end) slot. |
clearable | boolean | false | Shows a clear button when the input has a value. |
positive | boolean | false | Shows a positive (success) border style. |
disabled | boolean | false | Disables the input. Also inherited from FormControl. |
readOnly | boolean | false | Makes the input read-only with a subtle background. |
className | string | undefined | Additional CSS class names applied to the outer wrapper. |
All standard InputHTMLAttributes (except size and type) are also forwarded.
Accessibility
- Inherits
id,aria-invalid,aria-required, andaria-describedbyfrom the nearest FormControl. - Focus is indicated with
color-border-focusand a 2px outline. - The clear button uses
aria-label="Clear input"and is excluded from the tab order. - Leading and trailing elements are marked
aria-hidden="true"since they are decorative. - The component is
forwardRefcompatible.
Best practices
Do:
- Use appropriate
typevalues to trigger correct mobile keyboards. - Pair with FormControl for proper labelling and error messaging.
Don't:
- Do not use Input for multi-line text -- use Textarea instead.
- Do not place interactive elements in the element slots -- they are decorative.
Design tokens
| Token | Role |
|---|---|
color-background-default | Input background |
color-border-default | Default border |
color-border-focus | Focus border and outline |
color-border-danger | Invalid state border |
color-border-success | Positive state border |
color-text-placeholder | Placeholder text |
color-background-disabled | Disabled background |
radius-component-md | Border radius (md, lg sizes) |
radius-sm | Border radius (xs, sm sizes) |