Input

Live preview

Sign-in form with label, helper text, and error state.

Sign in

EmailWe’ll never share your email.PasswordInvite codeThis code has expired.Continue

Input

The Input component provides a styled text input with support for labels, error messages, helper text, and icons.

Usage

import { Input } from '@truongdq01/ui';
import { Mail } from 'lucide-react-native';

<Input
  label="Email"
  placeholder="you@example.com"
  leadingElement={<Mail />}
  onChangeText={(text) => console.log(text)}
/>;

Props

Prop	Type	Default	Description
label	string	—	Input label
placeholder	string	—	Placeholder text
value	string	—	Controlled value
onChangeText	(text: string) => void	—	Text change callback
error	string	—	Error message
helperText	string	—	Hint text
leadingElement	ReactNode	—	Element at the start (e.g. icon)
trailingElement	ReactNode	—	Element at the end
size	"sm" | "md" | "lg"	"md"	Input size preset
disabled	boolean	false	Disable input

Sizes

Heights align with Button for form rows:

Size	Height	Use case
sm	36dp	Compact filters, inline fields
md	44dp	Default — matches Button md
lg	52dp	Prominent checkout or auth fields

Corner radius uses radius.lg (same family as Button). Focus uses border color only — no layout shift.

Accessibility

• Pair every field with a visible label (or floatingLabel + placeholder).
• Use error for validation messages; helperText for non-error hints.
• disabled reduces opacity and blocks editing — do not rely on color alone.

Standard Icons

Elements passed to leadingElement or trailingElement are automatically styled via useIconStyle to match the input’s size and color context.

import { Search } from 'lucide-react-native';

<Input placeholder="Search..." leadingElement={<Search />} size="sm" />;