Forms

Input

A text input styled with the hl-input primitive.

stableNo JS requiredBuilt on <input>hydrateless/input.css

A text input styled with the hl-input primitive. It is a native <input>, so validation, autofill, and form behavior all work exactly as the browser intends, with no JavaScript.

Playground

Live

PlaceholderSizesmmdlgInvalidDisabled

Props

The framework bindings expose these props (and forward the rest to the root element).

Prop	Type	Default	Description
size	'sm' | 'md' | 'lg'	'md'	Control height and font size.
invalid	boolean	false	Apply the error state and set `aria-invalid`.

CSS variables

Override these on any ancestor to theme the component. See the theme studio to preview changes live.

CSS variable	Used for
--hl-border	Resting border color.
--hl-ring	Focus ring color.
--hl-radius-md	Corner radius.
--hl-control-height-md	Default height.

Accessibility

• A native <input>, so labels, autofill, and constraint validation behave normally.
• Pair invalid with a visible message and aria-describedby for the best screen-reader experience.
• Focus is shown with the shared --hl-ring token, never removed.

Related

TextareaA multi-line text input built on a native textarea.SelectA native select with a CSS-drawn caret.FieldAn accessible layout wrapper for one form control.ComboboxAn editable input paired with a filterable listbox.