Input
Styled native text input. Forwards standard HTML input attributes.
<Input placeholder="Email" type="email" />Usage
import { Input } from "@reva/ui";<Input placeholder="Search…" type="search" />Examples
Sizes
Use size: sm (32px height), default (40px), lg (44px), xl (48px). Horizontal padding and font size follow the same ladder as Button.
<VStack className="w-full max-w-sm" gap={3}> <Input placeholder="Small (sm)" size="sm" /> <Input placeholder="Default" size="default" /> <Input placeholder="Large (lg)" size="lg" /> <Input placeholder="Extra large (xl)" size="xl" /></VStack>Types
<VStack className="w-full max-w-sm" gap={3}> <Input placeholder="Password" type="password" /> <Input placeholder="Search…" type="search" /></VStack>With label
Pair with Label using id and htmlFor.
<VStack className="w-full max-w-sm" gap={2}> <Label htmlFor="demo-email">Email</Label> <Input autoComplete="email" id="demo-email" name="email" placeholder="you@example.com" type="email" /></VStack>Disabled
<Input disabled placeholder="Disabled" />Invalid
Use aria-invalid for error styling (matches component focus/error rings).
<Input aria-invalid placeholder="Invalid value" />Horizontal row
<HStack align="center" className="max-w-md" gap={2}> <Label className="w-24 shrink-0" htmlFor="demo-inline"> Name </Label> <Input className="flex-1" id="demo-inline" placeholder="Jane Doe" /></HStack>Props
| Prop | Description |
|---|---|
size | Optional. sm | default | lg | xl — control height, horizontal padding, and font size. Default: default. The native HTML size attribute is not exposed; use className or width utilities if you need a character-width field. |
| … | All other props are forwarded to the native <input> (type, value, defaultValue, onChange, disabled, aria-*, autoComplete, etc.). |
See MDN — <input> for attribute reference.