Components

Input

Displays a form input field or a component that looks like an input field.

Playground

Type—type

Placeholder—placeholder

Disabled—disabled

Invalid—aria-invalid

Usage

Import Input from the design system and set the native type. Text renders at 16px on mobile — so iOS never zooms the field on focus — and drops to 14px from the md breakpoint up.

import { Input } from "@workspace/ui/components/input"

<Input type="email" placeholder="Email" />

With Label

Pair the input with a Label connected via htmlFor, so clicking the label focuses the field.

<div className="grid w-full max-w-sm gap-3">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="Email" />
</div>

File

With type="file" the browse control is styled through the file: variants — transparent background, small medium-weight text in the foreground color.

Picture

<div className="grid w-full max-w-sm gap-3">
  <Label htmlFor="picture">Picture</Label>
  <Input id="picture" type="file" />
</div>

Disabled

A disabled input dims to 50% opacity, blocks pointer events, and shows the not-allowed cursor.

<Input type="email" placeholder="Email" disabled />

Invalid

Set aria-invalid when validation fails — the border and ring switch to the destructive color, and assistive technology announces the state. Inside a Field, FieldError wires this up automatically.

<Input type="email" placeholder="Email" aria-invalid />

With Button

Compose an input and a button in a flex row for inline actions like search or newsletter signup.

<div className="flex w-full max-w-sm items-center gap-2">
  <Input type="email" placeholder="Email" />
  <Button type="submit" variant="outline">
    Subscribe
  </Button>
</div>

Building forms

For complete forms, wrap inputs in the Field family — FieldLabel and FieldDescription handle labeling and helper text, and a disabled or invalid Field propagates its state down to the input. To attach icons, prefixes, or inline buttons to the field itself, reach for InputGroup. See the Field and Input Group pages for the full API.

<Field>
  <FieldLabel htmlFor="username">Username</FieldLabel>
  <Input id="username" placeholder="Enter your username" />
  <FieldDescription>
    Choose a unique username for your account.
  </FieldDescription>
</Field>

RTL

Inputs need no extra classes in right-to-left layouts — text alignment, caret, and padding all follow the direction of the document.

البريد الإلكتروني

<div dir="rtl" className="grid w-full max-w-sm gap-3">
  <Label htmlFor="email-rtl">البريد الإلكتروني</Label>
  <Input id="email-rtl" type="email" placeholder="البريد الإلكتروني" />
</div>

API Reference

Input renders a native input element and accepts all of its attributes — there are no custom props.

Prop	Type	Default
type	HTMLInputTypeAttribute	"text"

Tokens used

10 design tokens consumed by the Input component.

--input
Input
border-inputdark:bg-input/30
--ring
Ring
focus-visible:border-ringfocus-visible:ring-ring/50
--destructive
Destructive
aria-invalid:border-destructivearia-invalid:ring-destructive/20dark:aria-invalid:ring-destructive/40
--muted-foreground
Muted Foreground
placeholder:text-muted-foreground
--foreground
Foreground
file:text-foreground
--text-base
Text Base (16px)
text-base
--text-sm
Text Small (14px)
md:text-smfile:text-sm
--font-weight-medium
Font weight Medium (500)
file:font-medium
--radius-md
Radius 0.8× (8px)
rounded-md
--spacing
Spacing unit (4px)
h-9px-2.5py-1