Logobaseui-cn

Input

A text input field.

formprimitive
Loading preview...

Installation

npx baseui-cn add input

Usage

import { Input } from "@/components/ui/input"
<Input placeholder="Enter text..." />

Examples

Basic

A simple text input.

Loading preview...

Sizes

sm, md, and lg variants.

Loading preview...

Disabled

A disabled input.

Loading preview...

With Field

Combine with Field for a labeled input with error handling.

Loading preview...

API

Input

PropTypeDefaultDescription
size"sm" | "default" | "md" | "lg""md"Height and padding scale of the input
unstyledbooleanfalseStrip the outer wrapper styles for composition inside InputGroup
nativeInputbooleanfalseRender a plain <input> element instead of the Base UI primitive

API Reference

See the Base UI Input documentation for the full API reference, including all props, data attributes, and CSS classes.