Text input
<gui-textinput> A single-line text field with a label, hint, icon and errors.
Every component, live.
Try each one right here: type, pick, drag and open them. When one fits, its docs show every option, in plain HTML and in your framework.
47 components
Inputs
Text and numbers
Password
<gui-password> A password field with a button that shows or hides the password.
One-time code
<gui-otp> A one-time code field with one box per digit, that takes paste and autofill.
Number
<gui-number> A number field with bounds and arrow-key steps.
Currency
<gui-currency> A money amount field formatted in any currency and locale.
Textarea
<gui-textarea> A multi-line text field with a label, hint, errors and an optional character counter.
Slider
<gui-slider> A thumb to drag along a scale to pick a number, with bounds, steps, tick marks and a formatted value.
Range slider
<gui-range-slider> A slider with two thumbs to pick a low and a high number, such as a price range, whose value is { start, end }.
Markdown editor
<gui-markdown> A Markdown editor with a formatting toolbar and an optional preview.
Choices
Checkbox
<gui-checkbox> A checkbox with a label, hint and errors whose value is true or false.
Toggle
<gui-toggle> An on and off switch with a label, hint and errors whose value is true or false.
Radio group
<gui-radiogroup> A group of radio buttons to pick one option, with a label, hint and errors.
Select
<gui-select> A native select to pick one option, with a label, hint, icon and errors.
Dropdown
<gui-dropdown> A text field that searches a list of items and picks one, with a virtualized popup list, custom options and native form support.
Multi-select dropdown
<gui-multi-dropdown> A text field that searches a list of items and picks any number of them, shown as removable pills, with native form support.
List
<gui-list> A virtualized listbox to pick one item, with keyboard navigation, that renders the items you give it.
Multi-select list
<gui-multi-list> A virtualized listbox to pick any number of items, with keyboard navigation, that renders the items you give it.
Tags
<gui-tags> A field that turns typed text into a list of tags, with a label, hint and errors.
Files
File upload
<gui-file-upload> A field that uploads one file through your own upload service as soon as the user picks or drops it, with progress, retry and remove.
Multiple file upload
<gui-multi-file-upload> A field that uploads several files, one after another, through your own upload service, and lists them as removable pills.
Dates and times
Calendar
<gui-calendar> An always-visible month calendar to pick a date, with bounds, disabled dates and several months side by side.
Date input
<gui-date> A date field typed part by part (day, month and year) in the order of the locale.
Date picker
<gui-date-picker> A date field with a calendar popup, typed part by part or picked from the calendar.
Time input
<gui-time> A time field typed part by part (hour, minute and AM/PM) on the locale's 12 or 24-hour clock.
Time picker
<gui-time-picker> A time field with a list of times in a popup, with a minute step, bounds and disabled times.
Range calendar
<gui-range-calendar> An inline calendar to pick one or more date ranges, shown as pills above it.
Date range
<gui-range-date> A field to type one or more date ranges, each shown as a pill.
Date range picker
<gui-range-date-picker> A date range field with a calendar popup, for one or more ranges shown as pills.
Time range
<gui-range-time> A field to type one or more time ranges, each shown as a pill.
Time range picker
<gui-range-time-picker> A time range field with start and end time lists in a popup, for one or more ranges shown as pills.
Date-time calendar
<gui-date-time-calendar> An always-visible month calendar with a time picker on top, to pick a date and a time.
Date-time input
<gui-date-time> A date and time field typed part by part in the order and clock of the locale.
Date-time range calendar
<gui-range-date-time-calendar> An inline calendar with start and end times for one or more date-time ranges, shown as pills.
Date-time picker
<gui-date-time-picker> A date and time field with a popup of a calendar and a list of times.
Date-time range
<gui-range-date-time> A field to type one or more date-time ranges, each shown as a pill.
Date-time range picker
<gui-range-date-time-picker> A date-time range field with a popup calendar and times, for one or more ranges shown as pills.
Overlays
Dialog
<gui-dialog> Opens your native dialog as a modal or a drawer, and locks the page's scroll.
The board is called Q3 roadmap.
Popover
<gui-popover> Places your popover panel next to its button, above the rest of the page.
Toast
<gui-toaster> Short messages that don't interrupt, with variants, an action and a queue.
Tooltip
<gui-tooltip> A short description of a control, on hover and keyboard focus.
Layout
Accordion
<gui-accordion> Turns your details and summary elements into an accordion.
Shipping
Returns
Warranty
Tabs
<gui-tabs> Accessible tabs over your own tab strip and panels, with keyboard navigation.
Grid
.gui-grid Rows and columns that line up labels, controls and errors, and adapt to narrow containers.
Display
Alert
<gui-alert> A message box in a neutral, info, success, warning or error style, announced to screen readers.
Markdown text
<gui-markdown-text> Renders Markdown as styled HTML, with the parser your app provides.