Forms

Select

A native select with a CSS-drawn caret.

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

A native <select> styled with the hl-select primitive. The wrapper draws a custom caret in pure CSS while the native control keeps full keyboard and mobile behavior. No JavaScript.

Playground

Live

One Two Three

SizesmmdlgInvalidDisabled

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.

Accessibility

• A native <select>, so the platform picker, type-ahead, and keyboard all work.
• The caret is decorative CSS and never intercepts pointer or assistive interaction.

Related

ComboboxAn editable input paired with a filterable listbox.InputA text input styled with the hl-input primitive.FieldAn accessible layout wrapper for one form control.