Input
A text field with feel, animated focus border, pop-in clear button, errors that shake with a haptic buzz.
Prerequisites
expo install pins the versions that match your SDK, and the CLI tells you exactly which ones are missing when you add the component.
npx expo install react-native-reanimated expo-haptics react-native-css @hugeicons/react-native @hugeicons/core-free-icons
Install
npx @rslab/cli add input
Usage
Controlled only, like any RN TextInput you care about:
import { Input } from '@/components/ui/Input';
<Input
label="Email"
placeholder="you@example.com"
value={email}
onChangeText={setEmail}
error={emailError}
keyboardType="email-address"
autoCapitalize="none"
/>
<Input search placeholder="Search" value={q} onChangeText={setQ} />
To retrigger the shake with the same message, clear the error then set it again on the next frame.
Props
label?string-Small heading above the field.
error?string-Message below the field. Turns the border red, shakes the field and fires an error haptic when it appears.
success?booleanfalseGreen border and a checkmark that pops in. Error wins if both are set.
search?booleanfalsePill shape with a magnifier icon.
counter?booleanfalseCharacter counter under the field, needs maxLength. Turns red at the limit.
clearable?booleantrueShows a pop-in clear button while focused with content.
className?string-Extend or override the outer wrapper styles.
Everything else a TextInput takes is forwarded. Pass secureTextEntry and the field automatically gets an eye toggle to reveal the password.
See exactly how this works with an RSLAB subscription.
Get Pro