input
Displays a form input field or a component that looks like an input field.
Philosophy
The input is the most fundamental form primitive — a single line of text entry. We keep it deliberately thin: one component, no sub-parts, just a styled <input> that composes naturally with Label, Button, and form validation. Complex input patterns like search bars or password fields are built by composing Input with other primitives, not by bloating its API.
Installation
npx @gentleduck/cli add input
npx @gentleduck/cli add input
Usage
import { Input } from "@/components/ui/input"import { Input } from "@/components/ui/input"<Input /><Input />Examples
Default
File
Disabled
With Label
With Button
Form
API Reference
Input
A styled <input> element that accepts all standard HTML input attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
type | React.HTMLInputTypeAttribute | -- | The HTML input type (e.g., 'text', 'password', 'email', 'file'). Browsers default to 'text'. |
dir | 'ltr' | 'rtl' | -- | Text direction override. Resolved via useDirection (dir prop -> DirectionProvider -> 'ltr'). |
className | string | -- | Additional CSS classes to apply |
ref | React.Ref<HTMLInputElement> | -- | Ref forwarded to the underlying <input> element |
...props | React.HTMLProps<HTMLInputElement> | -- | Additional props to spread to the input element |
RTL Support
Direction is resolved through the shared primitives direction module. Use a local dir="rtl" override when the component exposes it, or set DirectionProvider at app/root level for global RTL/LTR behavior.