Ready-to-use components curated and voted on by the community.
A feedback HeroUI TextArea inside a text field with a label and character count.
Controlled switch preference with disabled companion.
A monthly budget HeroUI Slider with a label, live output and filled track.
Controlled plan selection with a disabled option, keyboard navigation and local status.
A docs search built from a HeroUI Search Field that filters local results as you type.
A HeroUI Range Calendar for picking trip dates, reporting the range and number of nights.
Controlled one-plan radio group with disabled Enterprise.
A seat-count Number Field with increment and decrement buttons and a running total.
A multi-select HeroUI List Box of integrations with descriptions and selected indicators.
A six-digit verification code entered with HeroUI Input OTP slots and checked locally.
A price field built from a HeroUI Input Group with currency prefix and suffix.
Controlled local email validation and focus recovery.
A sign-up Form with required fields, native validation messages and a submit action.
A billing Fieldset with a legend, grouped text fields and a save action.
A HeroUI Date Range Picker with start and end date segments and a range calendar popover for team offsite dates.
A HeroUI Date Picker with segmented typing and a calendar popover for a check-in date.
A segmented HeroUI Date Field for a booking date, reporting the ISO value.
A city search built from a HeroUI Combo Box that filters local options and marks the selection.
A theme accent chosen from a HeroUI Color Swatch Picker with a selected indicator.
A hue Color Slider with a label and output that tints a sample button.
A HeroUI Color Picker whose popover combines a colour area and hue slider for a brand colour.
A hex Color Field with a live swatch prefix that previews the typed colour.
A two-dimensional HeroUI Color Area for tuning a brand colour, with a live preview.
Notification preferences chosen with a labelled HeroUI Checkbox Group.