Input

A single-line text field with a soft edge that darkens and takes a grey halo on focus, in three heights (sm, default, lg).

ui.inputcomponents/ui/input.tsx

Use case

For the AI

Use it for one line of typed text in a form: a client's company name, an email, a phone number, an invoice number, a postal code. Put it in a Field with a FieldLabel so it is named and can show a hint or an error. The type attribute (email, tel, url, password) brings the right keyboard on a phone.

Use it when

A name, an email, a phone number or an address line
An identifier typed once: an invoice number, a postal code
Any one-line answer in a form

Use something else when

Several lines of text (notes, a message): Text area
Searching or filtering a list: Search field
An icon, a prefix, a unit or a button inside the field: Input group
A quantity stepped up and down: Number field

Examples

Default, focused shows the ink's edge

Small and large

Invalid and disabled

Code

Import

import { Field, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

Usage

<Field>
  <FieldLabel>Company name</FieldLabel>
  <Input placeholder="Atelier Nord" />
</Field>

<Input type="email" aria-label="Email" placeholder="bonjour@ateliernord.ca" />

<Input aria-invalid defaultValue="marc@" aria-label="Email" />

Rules

Every Input is named: a FieldLabel in the same Field, or aria-label.
Mark an error with aria-invalid (or invalid on its Field): the edge turns red.
Do not add a border, ring or outline: focus is the darker edge and grey halo from the tokens.
size is sm (34px), default (40px) or lg (48px).