Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Input Dropdown

v.1.0.0 | Saturn
Healthy
StorybookGithubFigma

Field that allow users to choose from a list of options in a limited space.

import { InputDropdown } from '@kubit-ui-web/react-components'
12345678910
<InputDropdown
  variant="DEFAULT"
  optionList={{
    options: [
      { label: 'Option 1', value: 1 },
      { label: 'Option 2', value: 2 },
    ],
  }}
  icon={{ icon: 'ICON_CHEVRON_DOWN' }}
/>

The inputDropdown component inherits its properties of the input component. For more information visit the Input documentation.

Variant

In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.

We have set this predefine style for its quick use, access them through the variant prop:

12345678910
<InputDropdown
  variant="DEFAULT"
  optionList={{
    options: [
      { label: 'Option 1', value: 1 },
      { label: 'Option 2', value: 2 },
    ],
  }}
  icon={{ icon: 'ICON_CHEVRON_DOWN' }}
/>

Loading

Loading state can be set on the search input or on the list of options.

In order to set the loading state on the search input, use the loading and loader props. Simliar to the input component.

12345678910
<InputDropdown
  variant="DEFAULT"
  optionList={{
    options: [
      { label: 'Option 1', value: 1 },
      { label: 'Option 2', value: 2 },
    ],
  }}
  icon={{ icon: 'ICON_CHEVRON_DOWN' }}
  loading={true}

In order to set the loading state on the list of options, use the loadingList prop. Use along with the loadingText prop to show a text that will be visible when no options are shown.

12345678910
<InputDropdown
  variant="DEFAULT"
  optionList={{
    options: [
      { label: 'Option 1', value: 1 },
      { label: 'Option 2', value: 2 },
    ],
  }}
  icon={{ icon: 'ICON_CHEVRON_DOWN' }}
  loadingList={true}

Enable Search

InputDropdown component allows users to search for options. In order to do that, the theme token allowSearch must be set to true. The search has been enabled for the variant DEFAULT_SEARCH.

12345678910
<InputDropdown
  variant="DEFAULT_SEARCH"
  optionList={{
    options: [
      { label: 'Option 1', value: 1 },
      { label: 'Option 2', value: 2 },
    ],
  }}
  icon={{ icon: 'ICON_CHEVRON_DOWN' }}
/>

For mobile and tablet users, you can set the hasInputInSearchList prop to show a filter input in the result popover. Check this behavior in the following example in a mobile or tablet view.

12345678910
<InputDropdown
  variant="DEFAULT_SEARCH"
  optionList={{
    options: [
      { label: 'Option 1', value: 1 },
      { label: 'Option 2', value: 2 },
    ],
  }}
  icon={{ icon: 'ICON_CHEVRON_DOWN' }}
  hasInputInSearchList={true}

No Results

When no results are found, the noResultsText prop can be used to show a message to the user.

12345678
<InputDropdown
  variant="DEFAULT"
  optionList={{
    options: [],
  }}
  icon={{ icon: 'ICON_CHEVRON_DOWN' }}
  noResultsText={{ content: 'No results found' }}
/>

Elements to show

Set the elementsToShow prop to modify the maximum number of elements to show when popover is displayed. It is predefined by default at 4.

12345678910
<InputDropdown
  variant="DEFAULT"
  optionList={{
    options: [
      { label: 'Option 1', value: 1 },
      { label: 'Option 2', value: 2 },
    ],
  }}
  elementsToShow={1}
  icon={{ icon: 'ICON_CHEVRON_DOWN' }}
Input Digit SequenceAccessibility
Input DropdownInput Dropdown