Input

A text input field for collecting single-line user input.

Choose a unique username for your account.

Installation

pnpm dlx stera-ui add input

Usage

import { Input } from "@/components/ui/input"
<Input placeholder="Email" />

With Field

Pair with Field, FieldLabel, and FieldDescription for accessible, labeled inputs.

Choose a unique username for your account.

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

Sizes

sm
md
lg
xl
SizeDescription
smSmall
mdMedium (default)
lgLarge
xlExtra large

Disabled

This field is currently disabled.

<Field data-disabled="true">
  <FieldLabel htmlFor="email">Email</FieldLabel>
  <Input id="email" disabled defaultValue="jane@example.com" />
</Field>

Invalid

<Field data-invalid="true">
  <FieldLabel htmlFor="email">Email</FieldLabel>
  <Input id="email" aria-invalid="true" defaultValue="not-an-email" />
  <FieldError>Please enter a valid email address.</FieldError>
</Field>

API Reference

Built on Base UI's Input primitive. Accepts all standard <input> props except size.

PropTypeDefault
size"sm" | "md" | "lg" | "xl""md"
typestring"text"