Input

Alpha

An accessible text input with built-in label, hint text, error handling, and aria attributes.

Import

import { Input } from "@compa11y/react";

Usage

Example.tsx

import { Input } from "@compa11y/react";

function Example() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
      <Input label="Email" type="email" hint="We'll never share your email." />
      <Input label="Password" type="password" required />
      <Input label="Username" error="Username is already taken" />
    </div>
  );
}

Features

Automatic label-input association
Hint text support
Error state with aria-invalid and aria-describedby
Required field indicator
Compound component API for custom layouts
CSS variable customization

Props

Input component props
Prop	Type	Default	Description
`label`*	`string`	-	Label text for the input
`hint`	`string`	-	Help text shown below the label
`error`	`string`	-	Error message (sets aria-invalid)
`value`	`string`	-	Controlled input value
`onValueChange`	`(value: string) => void`	-	Called when value changes
`type`	`string`	`'text'`	Input type attribute
`required`	`boolean`	`false`	Marks as required
`disabled`	`boolean`	`false`	Disables the input

Keyboard Interactions

Accessibility

All keyboard interactions follow WAI-ARIA best practices and work without any additional configuration.

Keyboard shortcuts for Input
Key	Action
`Tab`	Focuses the input