Input

40px tall, 12px side padding, Roboto / text-base. The border moves to Colors/input/border-focus on focus.

Figma: 10 / Components / Input

Usage

Source: src/components/ui/input.tsx

import { Input, InputGroupSearch } from '@/components/ui/input'

<Input placeholder='Page name' />

An input with a leading 20px search icon, used above lists and tables.

Default, filled, invalid and disabled.

When to reach for it, and when to use something else.

Use it for

Short single-line answers: names, links, amounts.

Always with a visible label through Field.

Avoid

Placeholder text as the only label.

Long answers; use a Textarea.

Prop	Type	Default	Description
type	string	'text'	Native input type.
aria-invalid	boolean	–	Shows the error border.

Prop	Type	Default	Description
placeholder	string	'Search'	Also used as the accessible name.
containerClassName	string	–	Classes for the wrapper, such as a max width.