Components

Button

A button allows a user to perform an action, with mouse, touch, and...

File Trigger

Allows a user to access the file system with any pressable aria...

Toggle Button

Toggle Buttons allow users to toggle a selection on or off.

Checkbox Group

A checkbox group allows a user to select multiple items from a list...

Checkbox

Checkboxes allow users to select multiple items from a list of...

NumberField

NumberField allows a user to enter a number, and increment or...

Radio Group

A radio group allows a user to select a single item from a list of...

SearchField

SearchField is a text field designed for searches.

Slider

An input where the user selects a value from within a given range.

Switch

Switches allow users to turn an individual option on or off.

TextArea

TextArea is a multiline text input.

TextField

TextField allows a user to enter a plain text value with a keyboard.

Combobox

Combobox combines a text input with a listbox, allowing users to...

ListBox

A list of options that can allow selection of one or more.

Menu

A menu displays a list of actions or options that a user can choose.

Select

Select displays a collapsible list of options and allows a user to...

Calendar

A component that allows users to select a single date.

Date Field

A date field allows users to enter and edit date and time values...

Date Picker

DatePicker combine a DateField and a Calendar overlay to allow users...

Date Range Picker

DateRangePicker combine a DateField and a RangeCalendar overlay to...

Range Calendar

A component that allows users to select a range of dates.

Time Field

TimeFields allow users to enter and edit time values using a keyboard.

Color Area

ColorArea allows users to adjust two channels of an RGB, HSL or HSB...

Color Field

A color field allows users to edit a hex color or individual color...

Color Picker

A ColorPicker combines a swatch with a customizable popover for...

Color Slider

ColorSlider allow users to adjust an individual channel of a color...

Color Swatch

A ColorSwatch displays a preview of a selected color.

Dropzone

A drop zone is an area into which one or multiple objects can be...

Alert

Displays a callout for user attention.

Progress

Progress shows the completion progress of a task in shape of a bar,...

Skeleton

Use to show a placeholder while content is loading.

Aspect Ratio

Displays content within a desired ratio.

Scroll area

Augments native scroll functionality for custom, cross-browser...

Avatar

An image element with a fallback for representing the user.

Badge

Displays a badge or a component that looks like a badge.

Separator

Visually or semantically separates content.

Breadcrumbs

Breadcrumbs display a hierarchy of links to the current page or...

Link

Link allows a user to navigate to another page or resource within a...

Tabs

Tabs organize content into multiple sections and allow users to...

Dialog

A dialog is an overlay shown above other content in an application.

Tooltip

Tooltip displays a description of an element on hover or focus.