Input

Filled single-line text field with focus, invalid and disabled states.

npx @eoria/cli add input

Usage

import { Input } from '@/components/ui/input'

<Input placeholder="you@example.com" keyboardType="email-address" value={email} onChangeText={setEmail} />
<Input invalid placeholder="Required" />
<Input disabled value="locked" />

Variants

Focus is tracked internally and drives the ring colour. Every TextInput prop passes through.

TextInputContext decides which text field Input, Textarea and InputGroup render. It defaults to React Native’s TextInput. Sheet provides BottomSheetTextInput inside its content, so these fields work with the sheet’s keyboard handling without changes. Provide your own value for a container that needs a different input.

Notes

• The frame is a 1.5pt transparent border over the muted fill, so the focus and error borders appear without a layout shift.
• placeholderTextColor and selectionColor come from the theme.
• Pair with Field for a label, description and error message wired for screen readers.

Source

registry/ui/input.tsx