Input
A text input field with consistent styling and validation states.
Import
import { Input } from "@retents/ui/input"Usage Guidelines
When to use
- For single-line text entry such as names, emails, URLs, or search queries.
- Inside forms, always paired with a Label for accessibility.
- When you need native HTML input types like
email,password,number, orsearch.
When NOT to use
- For multi-line text — use Textarea instead.
- For selecting from a predefined set of options — use Select, RadioGroup, or Command instead.
- For structured input like OTP codes — use InputOTP instead.
Accessibility
Always associate an Input with a Label using matching htmlFor/id attributes, or use aria-label for visually hidden labels.
Preview
Usage
<Input type="email" placeholder="Enter your email" />With Label
import { Label } from "@retents/ui/label"
<div className="grid gap-2">
<Label htmlFor="name">Name</Label>
<Input id="name" placeholder="Your name" />
</div>Validation states
The Input component supports aria-invalid for validation feedback:
<Input aria-invalid="true" value="invalid@" />Props
Extends all native <input> HTML attributes.