Input

Provides a single-line field for users to enter text or color values. Inputs should always be paired with a label to clearly communicate the expected content and ensure accessibility.

Usage

Use input fields for capturing user data, such as names, emails, or color. If you need a numeric input, use the Input Number instead. Avoid leaving inputs unlabeled, as this can confuse users and reduce accessibility.

API Reference

Component attribute(s)

x-h-input

Attributes

Attribute	Values	Required	Description
data-size	sm default	false	Changes the size of the input.

Modifiers

Modifier	Description
group	Used when the input is inside an input group
table	Used when the input is inside a table

Validation timing

By default this control shows native-constraint errors (for example required) only after the user interacts with it or attempts to submit, not on page load. To validate on load instead, set data-validate="immediate" on a wrapping x-h-fieldset, x-h-field, or any ancestor element. Setting aria-invalid="true" yourself always shows the error immediately. See Fieldset for details.

Data Slots

Slot	Element
input	x-h-input
input-group-control	x-h-input.group
cell-input	x-h-input.table

Examples

Text Input

<input x-h-input type="text" placeholder="Search..." />
<input x-h-input data-size="sm" type="text" placeholder="Search..." />

Color Input

<input x-h-input type="color" value="#26a269" />

Invalid Input

Reacts to the native invalid state or to the aria-invalid attribute.

<input x-h-input type="text" aria-invalid="true" />

Disabled

<input x-h-input type="text" value="Disabled" disabled />

Read-only

<input x-h-input type="text" value="Read-only value" readonly />