Input

Atomshadcn/ui, restyled with tokens

The bare single-line control TextField is built from. It has no label of its own.

components/atoms/input.tsx
Use it for
Building a new molecule, or a search box labelled by aria-label.
Not for
A form field. Use TextField, which brings the label and the error line.

States

Default
Focused
Invalid
Disabled
Variants
Small

Usage

import { Checkbox } from '@/components/atoms/checkbox';

<Input aria-label="Search people" type="search" />

Props

Input props
PropTypeDefaultDescription
variant'outlined' | 'filled' | 'standard''outlined'Outlined draws a border; filled sits on a light tint; standard on a solid grey.
size'sm' | 'md''md'Control height and type size: md is 44px, sm 32px. Not the native size attribute.
typeHTMLInputTypeAttribute'text'Any native input type.
aria-invalidboolean—The error state: red border, announced as invalid.
...restComponentProps<'input'>—Every native input prop, including ref.

Accessibility

  • Needs a name from somewhere: a <Label htmlFor>, aria-label or aria-labelledby.