Components

Input

A text input component for forms and user data entry with built-in styling, focus glow, and accessibility features.

Preview

Installation

npx blackboard-ui@latest add input

Usage

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

export default function Example() {
  return <Input />;
}

Examples

Default

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

Sizes

Use the size prop to control the input height, padding, and font size.

<Input size="sm" placeholder="Small" />
<Input placeholder="Default" />
<Input size="lg" placeholder="Large" />

With Label

Pair the input with Field, FieldLabel, and FieldDescription for accessible form fields.

We'll never share your email.

<Field>
  <FieldLabel htmlFor="email">Email</FieldLabel>
  <Input type="email" id="email" placeholder="Enter your email" />
  <FieldDescription>We'll never share your email.</FieldDescription>
</Field>

Disabled

Use the disabled prop to disable the input.

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

Invalid

Wrap with Field using data-invalid and aria-invalid on the input. Labels and errors cascade to destructive styling.

Please enter a valid email address.

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

File

Use type="file" to create a file input.

Picture

<Field>
  <FieldLabel htmlFor="picture">Picture</FieldLabel>
  <Input id="picture" type="file" />
</Field>

With Button

Combine the input with a Button for inline actions like subscribe or search.

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

API Reference

Input

Prop	Type	Default
size	"default" \| "sm" \| "lg"	"default"
type	string	"text"
placeholder	string	—
disabled	boolean	false
className	string	—

Also accepts all standard HTMLInputElement attributes (onChange, value, name, etc.).