Input

Forms

Feature-rich text input with 3 sizes, prefix/suffix slots, floating label, password toggle, clearable, character count, shake on error, and haptic on focus.

GitHub

Installation

bash

npx native-mate add input

Examples

#FAFAFA

Radius100%

Usage

tsx

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

// Basic
<Input label="Email" placeholder="you@example.com" />

// Sizes
<Input size="sm" placeholder="Small" />
<Input size="lg" placeholder="Large" />

// Required
<Input label="Name" required />

// Prefix & suffix text
<Input label="Price" prefixText="$" suffixText="USD" />
<Input label="Website" prefixText="https://" />

// Prefix & suffix icons
<Input prefix={<SearchIcon />} placeholder="Search..." clearable />
<Input suffix={<CheckIcon />} label="Email" />

// Password with toggle
<Input label="Password" secureTextEntry showPasswordToggle />

// Character count
<Input label="Bio" showCount maxLength={160} />

// Floating label (Material Design style)
<Input floatingLabel label="Email Address" />

// Error (triggers shake animation)
<Input label="Username" error="Already taken" />

// Haptic on focus
<Input label="Name" hapticOnFocus />

Props

Prop	Type	Default	Description
label	string	—	Label shown above the input (or floating inside when floatingLabel is true).
error	string	—	Error message shown below. Turns border red and triggers shake animation.
hint	string	—	Helper text shown below the input.
size	"sm" \| "md" \| "lg"	"md"	Controls height, font size, and padding.
required	boolean	false	Shows a red asterisk (*) after the label.
disabled	boolean	false	Dims input and prevents editing.
prefix	React.ReactNode	—	Icon or element rendered inside the input, before the text.
suffix	React.ReactNode	—	Icon or element rendered inside the input, after the text.
prefixText	string	—	Text addon attached to the left (e.g. "$", "https://"). Has a border separator.
suffixText	string	—	Text addon attached to the right (e.g. "USD", ".com"). Has a border separator.
clearable	boolean	false	Shows a clear (×) button when input has a value.
onClear	() => void	—	Called when the clear button is pressed.
showPasswordToggle	boolean	false	Shows a Show/Hide toggle for password inputs. Use with secureTextEntry.
showCount	boolean	false	Shows character count below the input. Pair with maxLength.
maxLength	number	—	Maximum character limit. Shown as x/max when showCount is true.
floatingLabel	boolean	false	Label animates from placeholder position to top of border on focus (Material Design style).
hapticOnFocus	boolean	false	Triggers a light haptic tap when input is focused. Requires expo-haptics (optional).
...TextInputProps	TextInputProps	—	All standard React Native TextInput props are forwarded.

Example

tsx

import { Input } from '~/components/ui/input'
import { View } from 'react-native'

export function InputExamples() {
  return (
    <View style={{ gap: 16, padding: 16 }}>
      <Input label="Email" placeholder="you@example.com" />
      <Input label="Price" prefixText="$" suffixText="USD" />
      <Input label="Password" secureTextEntry showPasswordToggle />
      <Input label="Bio" showCount maxLength={160} />
      <Input floatingLabel label="Floating Label" />
      <Input label="Search" placeholder="Type..." clearable />
      <Input label="Username" error="Already taken" />
      <Input label="Company" disabled value="Acme Inc." />
    </View>
  )
}

Accessibility

Feature	Detail
Label	accessibilityLabel is auto-set from the label prop.
Disabled state	accessibilityState={{ disabled }} is set when disabled.
Keyboard	Fully focusable and editable via assistive technology.

Card

Badge