TextInput

Installation

npx usmds add textinput

Usage

import { TextInput } from '@components/TextInput';
 
<TextInput 
  label="Text input label"
  placeholder="Enter text"
/>

Props

TextInput

Extends React Native's TextInput props.

Prop	Type	Default	Description
label	`string`	-	Label text displayed above the input.
helperText	`string`	`'Helper text'`	Helper text displayed below the label.
errorMessage	`string`	-	Error message displayed when state is 'error'.
required	`boolean`	`true`	When true, displays required indicator (*).
variant	`'default' \| 'prefix' \| 'suffix'`	`'default'`	The visual variant of the input.
state	`'default' \| 'focus' \| 'error' \| 'success' \| 'disabled'`	`'default'`	The current state of the input.
prefix	`ReactNode`	-	Element displayed before the input text.
suffix	`string`	-	Text displayed after the input text.

Examples

Default Input

<TextInput 
  label="Text input label"
  placeholder="Enter text"
/>

With Prefix Icon

import { User } from 'lucide-react-native';
 
<TextInput 
  label="Text input label"
  variant="prefix"
  prefix={<User size={24} color="#757575" />}
  placeholder="Enter text"
/>

With Suffix Text

<TextInput 
  label="Text input label"
  variant="suffix"
  suffix="lbs."
  placeholder="Enter text"
/>

Error State

<TextInput 
  label="Text input label"
  state="error"
  errorMessage="Helpful error message"
  helperText="Helper text"
  placeholder="Enter text"
/>

Success State

<TextInput 
  label="Text input label"
  state="success"
  placeholder="Enter text"
/>

Disabled State

<TextInput 
  label="Text input label"
  state="disabled"
  placeholder="Enter text"
/>

Styling

The TextInput component uses Tailwind CSS classes for styling through class-variance-authority (cva). Default styling includes:

Container width: 329px
Height: 40px
Base text size with 24px line height
White background
Base ink text color
Gray placeholder color
Font family: Source Sans Pro
Consistent padding based on variant
Border styling for different states

States

The input has several visual states:

Default: Base ink border
Focus: 4px focus ring border
Error: 4px error dark border with left indicator
Success: 4px success border
Disabled: Light background with reduced opacity

Accessibility

The TextInput component:

Uses semantic text input structure
Provides clear labeling
Supports screen readers with accessibilityRole and accessibilityLabel
Maintains proper text contrast
Includes helper text for additional context
Shows error states clearly
Supports keyboard navigation
Indicates required fields

TextInput

On this page