Component
Input
Collects short-form text from a user.
Install
Run the CLI to copy the source into your project.
pnpm dlx @stalk-ui/cli add @stalk-ui/inputExamples
Live previews render through the docs app's PandaCSS codegen.
<Input aria-label="Email" placeholder="hello@stalk-ui.com" />
<Input invalid aria-label="Email" defaultValue="not-an-email" />
<Input disabled aria-label="Read only" defaultValue="acme-corp" />
Props
Public component props extracted from the source TypeScript types.
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| `endSlot` | `ReactNode` | No | - | - |
| `rootProps` | `Omit<InputRootProps, keyof RootOnlyProps \ | 'children' \ | 'disabled'>` | No |
| `startSlot` | `ReactNode` | No | - | - |
| Prop | Type | Required | Default | Description |
| `invalid` | `boolean` | No | - | - |
| Prop | Type | Required | Default | Description |
| `align` | `InputAlign` | No | - | - |
| `disabled` | `boolean` | No | - | - |
| `invalid` | `boolean` | No | - | - |
| `size` | `InputSize` | No | - | - |
| Prop | Type | Required | Default | Description |
| `side` | `InputSlotSide` | No | - | - |
Variants
Variant axes exposed by the underlying PandaCSS recipe or slot recipe.
| Variant | Values |
|---|---|
| `disabled` | `true` |
| `invalid` | `true` |
| `size` | `sm`, `md`, `lg` |
| `align` | `start`, `center`, `end` |
Registry
Files this component contributes to your registry install.
- Manifest: `/r/input.json`
- Recipe: `input`
- Files: `src/components/ui/input.tsx`