Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Input Dropdown

v.1.0.0 | Saturn

Usage

The name of the object of tokens to style the inputDropdown component is INPUT_DROPDOWN_STYLES.

You can not change the name of the object of tokens.

inputDropdown component has one way to modify the styles:

  • Variant: modify the styles of the InputDropdown.

The structure of the INPUT_DROPDOWN_STYLES object is:

Variants and States

Variants can modify the styles for each inner state of the inputDropdown. The states are: InputState;

For each inner state the next tokens can be used:

12345678910
const INPUT_DROPDOWN_STYLES = {
  [VARIANT]: {
    [STATE]: InputBasicStateProps & {
      allowSearch?: boolean;
      inputVariant?: string;
      popoverVariant?: { [key in DeviceBreakpointsType]?: string };
      useActionBottomSheet?: { [key in DeviceBreakpointsType]?: boolean };
      actionBottomSheetVariant?: string;
      inputDropdownContainer?: CommonStyleType;
      searchListContainer?: CommonStyleType;

Types

  • InputDropdownListOptionsProps
12345
type InputDropdownListOptionsProps = {
  variant?: string;
  optionVariant?: string;
  hightlightedOptionVariant?: string;
};

Example

inputDropdown theme object example:

12345678910
const INPUT_DROPDOWN_STYLES = {
  [VARIANT]: {
    [STATE]: {
      allowSearch: 'boolean';
      inputVariant: 'variant',
      popoverVariant: {
        [DESKTOP]: 'boolean',
        [TABLET]: 'boolean',
        [MOBILE]: 'boolean',
      },
Input DropdownCode API
Input DropdownAccessibility