Forms

283 components

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