Input

InputsPrimitiveBuilt

Single-line text entry.

Also known as:
  • Input (Text, Number, Password)
  • Text Input
  • Input field
  • Input field with button
  • Input text
  • Input: text
  • Text input field
  • Text field wrapper
  • Text field
  • Textfield
  • Form Input
  • Text Box
  • Entry Field
  • Data Entry

Overview

Purpose

The Input component single-line text entry.within our design system. It follows our primitive layer principles, ensuring consistency and reusability across applications.

When to Use

  • Use when you need collecting user input
  • Appropriate for inputs contexts
  • Follows primitive component patterns

When Not to Use

  • Avoid when simpler alternatives exist
  • Don't use for display-only content
  • Consider alternatives for edge cases

Live Example

import React from 'react';
import Input from './components/Input';
import props from '/props.json';

export default function App() {
  return (
    <div style={{ padding: '2rem', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', maxWidth: '400px', width: '100%' }}>
      <Input
        size={props.size || 'medium'}
        error={props.error || false}
        success={props.success || false}
        disabled={props.disabled || false}
        placeholder={props.placeholder || 'Enter text...'}
        type={props.type || 'text'}
        value={props.value || ''}
      />
    </div>
  );
}
Open on CodeSandboxOpen Sandbox

Anatomy

Understanding the structure of the Input component helps ensure proper implementation and customization.

Anatomy data not yet defined for this component. Define anatomy in the component contract file (Input.contract.json).

Variants & States

import React from 'react';
import Input from './components/Input';
import props from '/props.json';

export default function App() {
  return (
    <div style={{ padding: '2rem', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', maxWidth: '400px', width: '100%' }}>
      <Input
        size={props.size || 'medium'}
        error={props.error || false}
        success={props.success || false}
        disabled={props.disabled || false}
        placeholder={props.placeholder || 'Enter text...'}
        type={props.type || 'text'}
        value={props.value || ''}
      />
    </div>
  );
}
Open on CodeSandboxOpen Sandbox

API Reference

Props

NameTypeRequiredDefaultDescription
invalidbooleanNo{aria—

Accessibility

Standards Compliance

This component follows WCAG 2.1 AA guidelines and includes proper ARIA attributes, keyboard navigation, and screen reader support.

Common Pitfalls

  • Mixing label/error inside
  • missing aria-\*
  • inconsistent disabled/required.

Accessibility Checklist

  • ○ Keyboard navigation support
  • ○ Screen reader compatibility
  • ○ Color contrast compliance
  • ○ Focus management
  • ○ ARIA attributes
  • ○ Reduced motion support

Content Guidelines

Voice

Helpful and guiding

Tone

Clear and supportive

Copy Examples

Do

Enter your email address

Don't

Email

Do

Password (minimum 8 characters)

Don't

Pass

UI Copy Patterns

  • Use descriptive labels, not placeholders
  • Include format hints when needed
  • Provide clear error messages
  • Use helper text for complex inputs

Usage Guidelines

✓ Do

  • Use consistent spacing and sizing
  • Follow established patterns
  • Provide clear labels and descriptions
  • Test with assistive technologies

✗ Don't

  • Override core functionality
  • Use without proper context
  • Ignore accessibility requirements
  • Modify without design system approval

Examples

Basic Usage

Simple implementation with default props and common configurations.

import React from 'react';
import Input from './components/Input';
import props from '/props.json';

export default function App() {
  return (
    <div style={{ padding: '2rem', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', maxWidth: '400px', width: '100%' }}>
      <Input
        size={props.size || 'medium'}
        error={props.error || false}
        success={props.success || false}
        disabled={props.disabled || false}
        placeholder={props.placeholder || 'Enter text...'}
        type={props.type || 'text'}
        value={props.value || ''}
      />
    </div>
  );
}
Open on CodeSandboxOpen Sandbox

Advanced Usage

Complex patterns including composition, state management, and real-world scenarios.

import React from 'react';

export default function App() {
  return (
    <div style={{ 
      padding: '2rem', 
      display: 'flex',
      flexDirection: 'column',
      gap: '1.5rem'
    }}>
      <h3>Input - Advanced Patterns</h3>
      <p>Advanced usage patterns for Input include:</p>
      <ul>
        <li>Composition with other components</li>
        <li>Custom styling and theming</li>
        <li>Controlled vs uncontrolled patterns</li>
        <li>Form integration</li>
        <li>Accessibility enhancements</li>
      </ul>
      <p style={{ color: '#6b7280', fontStyle: 'italic' }}>
        Full advanced examples coming soon.
      </p>
    </div>
  );
}
Open on CodeSandboxOpen Sandbox

Development Tools

Use these tools to analyze the component's performance, design tokens, and accessibility during development.

Changelog

v1.2.0
  • addedAdded `success` prop for success state styling
  • changedImproved error state visual feedback
v1.0.0
  • addedInitial release of Input component

Contribute

Help us improve the Input component documentation. Found an issue or have suggestions?

Edit this pageReport an issueContribution guidelines

Related Components

Checkbox

Binary toggle control.

Inputs • primitives

CheckboxGroup

Grouped options with label.

Inputs • compounds

ColorPicker

Input + palette.

Inputs • compounds

DatePicker

Input + calendar popover.

Inputs • compounds

FileInput

File picker + label.

Inputs • compounds

Radio

Single-choice option.

Inputs • primitives