Controls

Design Links

Open in Sketch Cloud

Open in Figma

Checkbox

Allows the user to toggle a single option on and off. The indeterminate state is to indicate that only a portion of the available options from a list or nested list have been selected.

@import 'node_modules/@hospitality-digital/design-system/css/components/checkbox.css';

Switch

Allows the user to switch between two opposed values.

@import 'node_modules/@hospitality-digital/design-system/css/components/switch.css';

Stepper

An alternative, mouse-friendly way to submit numerical values. The user can change the value through using the - and + buttons or by typing a value into the input field directly.

@import 'node_modules/@hospitality-digital/design-system/css/components/stepper.css';

Option

A styled variant of the Checkbox wrapped with a label. This allows the user to more easily scan and select multiple options in a grid view as opposed to a list view.

@import 'node_modules/@hospitality-digital/design-system/css/components/option.css';