Input

atoms

Text input with label, helper, error, and disabled states. Border darkens and adds glow on focus. Required for all forms.

ARIA Role: textbox

Demo

Email address

We'll never share your email.

With error

Please enter a valid value

Required field

Disabled

Props

Prop	Type	Required	Default	Description
`label`	`string`	Yes	`—`
`value`	`string`	Yes	`—`
`onChange`	`(value: string) => void`	Yes	`—`
`error`	`string`	No	`—`	Sets aria-invalid + aria-describedby to error message
`required`	`boolean`	No	`False`

TypeScript Interface

interface InputProps {
  label: string;
  value: string;
  onChange: (value: string) => void;
  type?: 'text' | 'email' | 'tel' | 'password' | 'number' | 'search' | 'url';
  placeholder?: string;
  helperText?: string;
  error?: string;
  required?: boolean;
  disabled?: boolean;
  leadingIcon?: React.ReactNode;
  trailingIcon?: React.ReactNode;
  id?: string;
}

Assertions (NASA Rule 5)

[type]label must be non-empty string(NASA Rule 5)
[aria]error must set aria-invalid='true' and aria-describedby to the error message id(WCAG 1.3.1, 3.3.1)

Usage

Import

import { Input } from '@epasslive/design-system'

Basic

<Input />

With Variants

<Input variant="primary" size="md" />