Input

Text input fields with validation states

InputsStable

Preview

Interactive preview of the Input component with different variants.

Installation

Install the package via npm:

bash
npm install apex-design-system

Import

tsx
import { Input } from 'apex-design-system';

Basic Usage

tsx
<Input type="text" placeholder="Enter your name" />

Input Types

tsx
<Input type="email" placeholder="Email address" />
<Input type="password" placeholder="Password" />
<Input type="number" placeholder="Age" />
<Input type="url" placeholder="Website URL" />

With Label

tsx
import { Label, Input } from 'apex-design-system';

<div className="space-y-2">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="you@company.com" />
</div>

Accessibility

This component follows WAI-ARIA best practices and is WCAG 2.1 AA compliant. It includes proper keyboard navigation, focus management, and screen reader support.

View in StorybookView source