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 Sandbox

Initializing sandbox...

Anatomy

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

Component anatomy diagram will be generated based on the actual component structure.

Variants & States

Disabled

Open Sandbox

Initializing sandbox...

API Reference

Props

Props documentation will be auto-generated from the component implementation.

Methods

Method documentation will be extracted from the component interface.

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

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

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 Sandbox

Initializing sandbox...

Advanced Usage

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>
  );
}