Text fields with labels, helper and error text, icons and a password reveal toggle.
npx shadcn@latest add @lokalhost/inputsThe source is copied to components/ui/input.tsx — it’s yours to edit.
import { Input } from "@/components/ui/input";
<Input
label="Email"
icon="mail-outline"
placeholder="you@example.com"
keyboardType="email-address"
autoCapitalize="none"
value={email}
onChangeText={setEmail}
error={invalid ? "Enter a valid email address." : undefined}
helperText="We’ll never share your email."
/>
<Input label="Password" icon="lock-closed-outline" secure />| Prop | Type | Default | Description |
|---|---|---|---|
label | string | undefined | Label rendered above the field. |
helperText | string | undefined | Muted hint rendered below the field. |
error | string | undefined | Error message. Turns the border red and replaces helperText. |
icon | keyof typeof Ionicons.glyphMap | undefined | Leading Ionicons glyph. |
secure | boolean | false | Hides input and shows an eye toggle to reveal it. |
...props | TextInputProps | — | Forwarded to the underlying TextInput. |