Input

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

Installation

bash

npx shadcn@latest add @redpanda/input

bash

pnpm dlx shadcn@latest add @redpanda/input

bash

yarn dlx shadcn@latest add @redpanda/input

bash

bunx shadcn@latest add @redpanda/input

bash

nubx shadcn@latest add @redpanda/input

bash

aube dlx shadcn@latest add @redpanda/input

When to use

Use this decision tree to determine when to use the Input component:

Usage

tsx

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

tsx

<Input />

Appearance contracts

Use finite props for appearance; reserve className for placement and width.

Prop	Values	Purpose
`size`	`sm`, `md`, `lg`	Consistent field height and padding
`tone`	`standard`, `success`	Verified-value feedback; `aria-invalid` still takes precedence
`textStyle`	`standard`, `monospace`	Fixed-width identifiers, durations, and large integers
`appearance`	`standard`, `surface`, `flat`, `surface-flat`, `embedded`, `inline`	Field chrome owned by the input

surface uses the page background; flat removes the field shadow. surface-flat combines these for sidebar search. Use embedded only inside a composite that already provides its border and focus indicator, such as InputGroup. Use inline for editable text that inherits its surrounding typography and owns an underline instead of a boxed field.

Supply aria-invalid or a Field error state for invalid values rather than replacing border classes. Put icons and interactive controls in InputStart and InputEnd; their measured widths reserve text space without manual padding overrides.

Color swatches

Use ColorInput for a native color picker rather than restyling the text Input. Its presentation="swatch" mode sits over a painted proxy and reveals the native control with a visible ring on keyboard focus. Always provide a label; the forwarded ref points directly to the native color input.

tsx

import { ColorInput } from '@/components/ui/input';
<ColorInput aria-label="Accent color" defaultValue="#c93617" />;

Examples

Default

Number

Password

File

Disabled

With Label

With Button

With Slots

With Date Picker

Form

Credits

We take our inspiration from Shadcn UI for the input component and style.

Recent changes

patchv1.2.0Pin shipped dependency floors to the version we develop against. Registry items now declare ranges like `^5.1.9` (the actual installed version) instead of collapsing to `^5.0.0`, so consumers start on the known-tested baseline while caret semantics still allow any compatible release within the same major.#133

minorv1.1.0Theme docs refresh, readability pass on semantic foregrounds, and consumer-facing Base UI regression fixes.#121

minorv1.0.0Post-Base-UI polish. Public API unchanged.#116

majorv1.0.0Migrate every Radix-based primitive to `@base-ui/react@^1.4.0` (Base UI).#114

minorv0.3.0Add theme-provider component to the registry with documentation and tests. Includes playground type improvements (export RegistryItem, remove as-const boilerplate) and docs site dark mode border color fix.#109

See full history →