Input

A high-quality, styled React input component built with @base-ui/react that integrates seamlessly with Field and form state.

The Input component renders an accessible form text input with customizable size variants and focus state styling.

Usage

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

export function ExampleInput() {
  return (
    <label className="flex flex-col items-start gap-1 text-sm font-medium">
      Name
      <Input placeholder="e.g. Colm Tuite" />
    </label>
  );
}

Preview

Sizes

<Input size="sm" placeholder="Small..." />
<Input size="md" placeholder="Medium..." />
<Input size="lg" placeholder="Large..." />

Form Field Integration

Integrate Input with Field to render labels, helper descriptions, and error states:

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

export function FormFieldExample() {
  return (
    <Field.Root className="w-full max-w-sm">
      <FieldLabel>Email Address</FieldLabel>
      <Input type="email" placeholder="you@example.com" />
      <FieldDescription>We will never share your email address.</FieldDescription>
      <FieldError />
    </Field.Root>
  );
}

Anatomy

import { Input } from "@base-ui/react/input";

<Input />;

API Reference

Input Props

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Dimension size of the input.
`value`	`string`	`undefined`	Controlled input value.
`defaultValue`	`string`	`undefined`	Initial uncontrolled input value.
`onValueChange`	`(value: string) => void`	`undefined`	Callback fired when value changes.
`disabled`	`boolean`	`false`	Disables user interaction.