Forms

Checkboxes allow users to select one or more items from a group of options.

The CheckboxGroup component is used for displaying a list of related options, in the form of Checkbox inputs, where multiple choices may be selected.

An HEX value color picker.

A text input with a dropdown list of options.

The ConditionEditor components lay out editable condition rows — a card per condition holding the controls that edit it, joined to the rows around it by their operator.

DatePicker allows a user to select a date or date range from a dropdown calendar.

FileField lets people choose files from their device, either through a button or a drag-and-drop area.

A component to handle submitting forms.

A textarea component for JSON input

A numeric input field with increment/decrement controls, value clamping, and keyboard support.

OptionCards present the functionality of a radio or checkbox in a more visually prominent card format with an increased click area.

A wrapper for OptionCard components.

The Radio form control allows for selection of one option from a group.

The RadioGroup component is used for displaying a list of related options, in the form of Radio inputs, where only one choice can be selected.

Search provides the ability to narrow down data using a specialized TextField.

Toggle from a set of two or more options. SegmentedControl is essentially a styled wrapper around a group of radio inputs.

Selecting a value from a dropdown list of options.

The dropdown surface a Select renders, with an optional header, categories rail, detail pane and footer.

Choose a number value within a range.

TextArea receives much longer user text input to complete a form.

TextField receives user text input to complete a form.

The Toggle component renders a switch to toggle between enabled or disabled states.