Input

StableBase UI

Live preview

Installation

pnpm dlx shadcn@latest add @sc1m/input

This also merges the token layer and installs src/lib/cn.ts plus @base-ui/react. For the manual route — prerequisites, components.json, and app-level setup — see Installation.

Usage

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

Example

The preview above, with its source. This is the demo module verbatim, so the code and the thing it renders cannot drift apart.

<Input placeholder="Enter text…" />

API reference

Each part forwards every prop of its Base UI counterpart; the tables list the ones declared on the part itself. See Base UI's reference for the inherited element props.

PropTypeDefaultDescription

onValueChange((value: string, eventDetails: Input.ChangeEventDetails) => void)—Callback fired when the value changes.

defaultValueField.Control.Props['defaultValue']—The default value of the input.

valueReact.ComponentProps<'input'>['value']—The value of the input.

Accessibility

Behaviour, focus management, and ARIA wiring come from Base UI's Input — see its reference for the full keyboard map.

Design tokens

The component reads semantic tokens only — no raw colour, radius, or duration appears in its source. Override the token, not the component.

TokenApplied to

--brand-radius-mdInput

--fgInput

--fg-subtleInput

--lineInput

--ringInput

--surfaceInput

--surface-raisedInput

Source

src/components/ui/input/input.tsx — no next/* imports, so it drops into any React 19 + Tailwind v4 app.

Input

On this page