# Input

A standalone text input that integrates with Base UI Field.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





## Preview [#preview]

### States and sizes [#states-and-sizes]

<ComponentPreview src="examples/components/input.tsx">
  <InputDemo />
</ComponentPreview>

### Label and validation [#label-and-validation]

<ComponentPreview src="examples/components/input-field.tsx">
  <InputFieldDemo />
</ComponentPreview>

## Installation [#installation]

<CodeBlockCommand __npm__="`npx shadcn@latest add ${SITE.URL}/r/input.json`" __pnpm__="`pnpm dlx shadcn@latest add ${SITE.URL}/r/input.json`" __yarn__="`yarn dlx shadcn@latest add ${SITE.URL}/r/input.json`" __bun__="`bunx shadcn@latest add ${SITE.URL}/r/input.json`" />

## Usage [#usage]

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

<Input aria-label="Email" type="email" placeholder="you@example.com" />;
```

## API Reference [#api-reference]

`value` / `defaultValue`, `onChange`, `onValueChange`, `disabled`, `readOnly`, `required`, `type` and native input attributes follow Base UI Input. `density`: default or compact, inherited from SizeProvider when omitted. `shape`: rounded or pill, inherited from ShapeProvider. Native `size` remains the character-width attribute. Use a label or `aria-label`; descriptions and validation messages can be connected through Base UI Field. For prefixes, suffixes and addons, use [InputGroup](/docs/components/input-group).