# GolemUI Components gallery: every element, live

> Every GolemUI Component running live on one page: text fields, pickers, sliders, overlays and more. Search or filter by category, then open the docs of the one you need.

The page, [/components/gallery/](/components/gallery/), runs every element live. Here, each one links to the Markdown of its docs page.

## Inputs

### Text and numbers

- [Text input](/components/docs/inputs/textinput.md) `<gui-textinput>`: A single-line text field with a label, hint, icon and errors.
- [Password](/components/docs/inputs/password.md) `<gui-password>`: A password field with a button that shows or hides the password.
- [One-time code](/components/docs/inputs/otp.md) `<gui-otp>`: A one-time code field with one box per digit, that takes paste and autofill.
- [Number](/components/docs/inputs/number.md) `<gui-number>`: A number field with bounds and arrow-key steps.
- [Currency](/components/docs/inputs/currency.md) `<gui-currency>`: A money amount field formatted in any currency and locale.
- [Textarea](/components/docs/inputs/textarea.md) `<gui-textarea>`: A multi-line text field with a label, hint, errors and an optional character counter.
- [Slider](/components/docs/inputs/slider.md) `<gui-slider>`: A thumb to drag along a scale to pick a number, with bounds, steps, tick marks and a formatted value.
- [Range slider](/components/docs/inputs/range-slider.md) `<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](/components/docs/inputs/markdown.md) `<gui-markdown>`: A Markdown editor with a formatting toolbar and an optional preview.

### Choices

- [Checkbox](/components/docs/inputs/checkbox.md) `<gui-checkbox>`: A checkbox with a label, hint and errors whose value is true or false.
- [Toggle](/components/docs/inputs/toggle.md) `<gui-toggle>`: An on and off switch with a label, hint and errors whose value is true or false.
- [Radio group](/components/docs/inputs/radiogroup.md) `<gui-radiogroup>`: A group of radio buttons to pick one option, with a label, hint and errors.
- [Select](/components/docs/inputs/select.md) `<gui-select>`: A native select to pick one option, with a label, hint, icon and errors.
- [Dropdown](/components/docs/inputs/dropdown.md) `<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](/components/docs/inputs/multi-dropdown.md) `<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](/components/docs/inputs/list.md) `<gui-list>`: A virtualized listbox to pick one item, with keyboard navigation, that renders the items you give it.
- [Multi-select list](/components/docs/inputs/multi-list.md) `<gui-multi-list>`: A virtualized listbox to pick any number of items, with keyboard navigation, that renders the items you give it.
- [Tags](/components/docs/inputs/tags.md) `<gui-tags>`: A field that turns typed text into a list of tags, with a label, hint and errors.

### Files

- [File upload](/components/docs/inputs/file-upload.md) `<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](/components/docs/inputs/multi-file-upload.md) `<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](/components/docs/inputs/calendar.md) `<gui-calendar>`: An always-visible month calendar to pick a date, with bounds, disabled dates and several months side by side.
- [Date input](/components/docs/inputs/date.md) `<gui-date>`: A date field typed part by part (day, month and year) in the order of the locale.
- [Date picker](/components/docs/inputs/date-picker.md) `<gui-date-picker>`: A date field with a calendar popup, typed part by part or picked from the calendar.
- [Time input](/components/docs/inputs/time.md) `<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](/components/docs/inputs/time-picker.md) `<gui-time-picker>`: A time field with a list of times in a popup, with a minute step, bounds and disabled times.
- [Range calendar](/components/docs/inputs/range-calendar.md) `<gui-range-calendar>`: An inline calendar to pick one or more date ranges, shown as pills above it.
- [Date range](/components/docs/inputs/range-date.md) `<gui-range-date>`: A field to type one or more date ranges, each shown as a pill.
- [Date range picker](/components/docs/inputs/range-date-picker.md) `<gui-range-date-picker>`: A date range field with a calendar popup, for one or more ranges shown as pills.
- [Time range](/components/docs/inputs/range-time.md) `<gui-range-time>`: A field to type one or more time ranges, each shown as a pill.
- [Time range picker](/components/docs/inputs/range-time-picker.md) `<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](/components/docs/inputs/date-time-calendar.md) `<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](/components/docs/inputs/date-time.md) `<gui-date-time>`: A date and time field typed part by part in the order and clock of the locale.
- [Date-time range calendar](/components/docs/inputs/range-date-time-calendar.md) `<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](/components/docs/inputs/date-time-picker.md) `<gui-date-time-picker>`: A date and time field with a popup of a calendar and a list of times.
- [Date-time range](/components/docs/inputs/range-date-time.md) `<gui-range-date-time>`: A field to type one or more date-time ranges, each shown as a pill.
- [Date-time range picker](/components/docs/inputs/range-date-time-picker.md) `<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](/components/docs/overlays/dialog.md) `<gui-dialog>`: Opens your native dialog as a modal or a drawer, and locks the page's scroll.
- [Popover](/components/docs/overlays/popover.md) `<gui-popover>`: Places your popover panel next to its button, above the rest of the page.
- [Toast](/components/docs/overlays/toast.md) `<gui-toaster>`: Short messages that don't interrupt, with variants, an action and a queue.
- [Tooltip](/components/docs/overlays/tooltip.md) `<gui-tooltip>`: A short description of a control, on hover and keyboard focus.

## Actions

- [Button](/components/docs/actions/button.md) `<gui-button>`: A button with an icon and a loading state, or a link styled as one.
- [Menu](/components/docs/actions/menu.md) `<gui-menu>`: A popover of actions, with the menu button keyboard pattern and typeahead.

## Layout

- [Accordion](/components/docs/layout/accordion.md) `<gui-accordion>`: Turns your details and summary elements into an accordion.
- [Tabs](/components/docs/layout/tabs.md) `<gui-tabs>`: Accessible tabs over your own tab strip and panels, with keyboard navigation.
- [Grid](/components/docs/layout/grid.md) `.gui-grid`: Rows and columns that line up labels, controls and errors, and adapt to narrow containers.

## Display

- [Alert](/components/docs/display/alert.md) `<gui-alert>`: A message box in a neutral, info, success, warning or error style, announced to screen readers.
- [Markdown text](/components/docs/display/markdown-text.md) `<gui-markdown-text>`: Renders Markdown as styled HTML, with the parser your app provides.