Selects

Design Links

Open in Sketch Cloud

Open in Figma

Select

Allows the user to select one value from a predefined list.

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

Range Selection

Use this selector for setting a price span or any other range. The selected range is displayed in two labels at the top and text inputs at the bottom of the component. When the values in the text inputs change the range slider is updated accordingly.

List Selection

A simple list with multiple selectable options

Filter Input

Renders an input in a dropdown and displays the state of the input. Clicking the filter will open or close the dropdown. The dropdown contains a List Selection input or a Range Selection input as well as a button to clear the input's values.

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

Autocomplete

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