Input

Text input with visible focus and validation built in with Field.

Name

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add input

Dependencies

What add input installs alongside the component. The CLI skips any you already have in a compatible version.

ZUNO registry

@zuno/utils

npm

@base-ui/[email protected]

Examples

3 examples · 1 component

Input with validation

Linked label, help text and error. Try submitting the empty field.

Reference

Disabled input

Keeps the content and the control's native semantics.

Reference

Read-only input

Keeps the content and the control's native semantics.

API reference

Keeps the props, events and refs of the matching Base UI primitive, plus ZUNO's styles.

Prop	Type	Default
`type` Native input type.	`string`	`"text"`
`value / defaultValue` Controlled value or initial value.	`string`	—
`onValueChange` Receives the updated text.	`(value, eventDetails) => void`	—
`disabled / readOnly` Disables editing or makes the input read-only.	`boolean`	`false`

States

The states that apply to this component and their visual treatment.

State	Treatment
Rest	Identifiable 1 px border (input token).
Focus visible	2 px ring outline merged with the border.
Invalid	Inside Field, destructive border and a text error.
Disabled	disabled prevents interaction and focus.
Read-only	readOnly keeps the content selectable.

Accessibility

Link the control to a label: inside Field use FieldLabel; outside Field, an associated native label. The placeholder complements the label, it does not replace it.

Keep focus visible and explain errors with text. Use disabled to prevent interaction and readOnly when the content should remain selectable.