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
startElement ReactNode - Element displayed at the start
endElement ReactNode - Element displayed at the end
helperText string - Helper text displayed below the input
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
type string 'text' HTML input type

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.
This field is required
Email is available
 
<Input placeholder="Default state" />
<Input state="error" helperText="This field is required" />
<Input state="success" helperText="Email is available" />

Examples

Password Input

Password input with visibility toggle.

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

Clearable Input

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

 
<Input placeholder="Type to search..." clearable />

Disabled and Read-Only

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

Accessibility

  • Keyboard Support: Standard text input behavior with Tab navigation.
  • Screen Reader: Announces input type, value, and validation state.
  • Focus Management: Visible focus ring on keyboard navigation.
  • Action Buttons: Clear and password toggle have aria-labels.
  • WCAG Compliance: Meets AA standards for contrast and labeling.

Best Practices

  • Wrap Input with FormField molecule for proper label association
  • 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