atom

Input

A single-line text input component with support for states, helper text, and built-in clear/password toggle functionality.

Overview

The Input component is a form control for single-line text entry. It includes built-in support for validation states, helper text, icons, clearable functionality, and password visibility toggle.

Props

Prop Type Default Description
density 'default' | 'compact' 'default' Controls vertical padding
state 'default' | 'error' | 'success' 'default' Validation state affecting border color
type 'text' | 'email' | 'password' | 'newPassword' | 'number' | 'tel' | 'search' | 'url' 'text' Determines input mode and other specific behavior per type
defaultValue string - Sets default value for the input
startElement ReactNode - Element displayed at the start
endElement ReactNode - Element displayed at the end. Ignored when clearable or showPasswordToggle is active.
helperText string - Helper text displayed below the input
placeholder string - String that will be rendered before text input has been entered
clearable boolean false Shows clear button when input has value
onClear () => void - Callback when clear button is clicked
showPasswordToggle boolean false Shows password visibility toggle
disabled boolean false Whether the input is disabled
readOnly boolean false Whether the input is read-only
testID string - Test ID for testing
accessibilityLabel string - Accessibility label for screen readers
value string - Controlled value. Pair with onChangeText.
onChangeText (text: string) => void - Callback fired on every text change. Required when value is set.

Variants

Density

Control the vertical padding for different contexts.

<Input placeholder="Default density" density="default" />
<Input placeholder="Compact density" density="compact" />

Validation States

Visual feedback for form validation.

<Input placeholder="Default state" />
<Input placeholder="Error state" state="error" helperText="This field is required" />
<Input placeholder="Success state" state="success" helperText="Email is available" />

Examples

Password Input

Password input with visibility toggle.

<Input type="password" placeholder="Enter password" showPasswordToggle />

Clearable Input

Input with clear button that appears when there's a value.

<Input type='search' placeholder='Type to search...' clearable />

Email Input

Use type="email" for email address fields. This enables email-specific keyboards on mobile devices. 

<Input type="email" placeholder="user@example.com" />

Number Input

Use type="number" for numeric fields. 

<Input type='number' placeholder='0' />

Phone Input

Use type="tel" for phone number fields. This enables numeric keyboards on mobile devices. 

<Input type="tel" placeholder="+1 (555) 000-0000" />

Disabled and Read-Only

<Input placeholder="Disabled input" disabled />
<Input defaultValue="Read-only value" readOnly />

startElement and endElement

<Input
  startElement={<DollarSign color={colors.foregroundMuted} size={iconSizes.iconSizeMd.number} />}
  type="number"
  placeholder="0"
  accessibilityLabel="Amount"
/>
<Input
  endElement={<Search color={colors.foregroundMuted} size={iconSizes.iconSizeMd.number} />}
  placeholder="Type to search..."
  accessibilityLabel="Search"
/>

Accessibility

  • Screen Reader: Announces label, value, and helper text via VoiceOver (iOS) and TalkBack (Android). Helper text is exposed as accessibilityHint.
  • Disabled State: When disabled is set, accessibilityState communicates "disabled" to screen readers and the input is non-editable.
  • Action Buttons: Clear and password toggle have accessibility labels.
  • WCAG Compliance: Meets AA standards for contrast and labeling. Clear and password toggle buttons meet the 44×44pt minimum tap target. Default density uses explicit minHeight/minWidth while compact density uses hitSlop to extend the tap area without affecting the compact layout. Press feedback follows platform conventions.
  • Press Feedback: iOS uses background color highlight; Android uses a native ripple.

Best Practices

  • Wrap Input with <KeyboardAvoidingView /> with proper behavior per platform.
  • Always provide helperText when using error state to explain the issue
  • Use appropriate input type (email, password, number) for better mobile keyboards
  • For multi-line text, use Textarea component instead