Input

A native text input primitive with controlled and uncontrolled value handling.

Features

Native semantics
Controlled or uncontrolled
String value updates
Standard input types
Headless styling

Installation

npm install @ariaui/input

Examples

Each row is a separate live example: controlled text, password, input stacked with a button, and a native file picker pattern (the package does not expose a file type on Input.Root).

Styling uses semantic tokens (border-input, bg-background, brand button utilities) aligned with the legacy doc scenarios.

Basic controlled

Track value with useState and pass value plus onValueChange.

Preview

No preview output yet.

live.tsxReady

Password

Use type="password" for masked entry; controlled the same way as text.

Preview

No preview output yet.

live.tsxReady

With button

Stack Input.Root with Button.Root for common form layouts.

Preview

No preview output yet.

live.tsxReady

File (native)

@ariaui/input does not wrap file inputs; use a labeled native input with sr-only for the control.

Preview

No preview output yet.

live.tsxReady

Anatomy

tsx

import * as Input from "@ariaui/input";

export default function Example() {
  return <Input.Root />;
}

API Reference

Root

A headless text input primitive. Wraps the native `<input>` element with controlled/uncontrolled value support.

Prop	Type	Default
type	'text' \| 'email' \| 'password' \| 'tel' \| 'url' \| 'search'	'text'
value	string	—
defaultValue	string	''
onValueChange	(value: string) => void	—
onChange	(event: React.ChangeEvent<HTMLInputElement>) => void	—
disabled	boolean	false
required	boolean	false

Keyboard

Shortcut	Action
`Tab`	Move focus to the next focusable element.
`Shift`+`Tab`	Move focus to the previous focusable element.
`Character keys`	Enter text according to the input type.
`Backspace`/`Delete`	Remove text around the caret using native browser behavior.
`Home`/`End`	Move the caret to the start or end of the input value.
`←`/`→`	Move the caret through the input value.
`Enter`	Submit the nearest form when the input is a single-line text field.

Accessibility

Input renders a native <input> element, which provides the correct accessibility semantics by default:

Always associate the input with a <label> using htmlFor and id, or wrap the input inside the label.
Use aria-describedby to reference helper text or validation messages.
Use aria-invalid="true" when the value fails validation.
Prefer the required prop over aria-required so the semantic required attribute is applied.
When disabled is set, the native disabled attribute removes the input from the tab order and keyboard interaction.