Dropdown

The use of dropdowns has its advantages but it depends on the screen support. Dropdowns are a standard widget, so the users know how to interact with them. The options available in a dropdown component are static, preventing erroneous data entered by the user since it only shows a range of correct values for that input.

Props

Name	Type	Description	Default
Required options	`{ label?: string; icon?: string \| (React.ReactNode & React.SVGProps <SVGSVGElement>); value: string }[]`	An array of objects representing the options. Each object has the following properties: label: Option display value. icon: Material Symbol name or SVG element as the icon that will be placed next to the option label. When using Material Symbols, replace spaces with underscores. By default they are outlined if you want it to be filled prefix the symbol name with `"filled_"`. value: Option inner value.	-
optionsIconPosition	`'before' \| 'after'`	In case options include icons, whether the icon should appear after or before the label.	`'before'`
icon	`string \| (React.ReactNode & React.SVGProps <SVGSVGElement>)`	Material Symbol name or SVG element as the icon that will be placed next to the dropdown label. When using Material Symbols, replace spaces with underscores. By default they are outlined if you want it to be filled prefix the symbol name with `"filled_"`.	-
iconPosition	`'before' \| 'after'`	Whether the icon should appear after or before the label.	`'before'`
label	`string`	Text to be placed within the dropdown.	-
caretHidden	`boolean`	Whether the arrow next to the label must be displayed or not.	`false`
disabled	`boolean`	If true, the component will be disabled.	`false`
expandOnHover	`boolean`	If true, the options are shown when the dropdown is hovered.	`false`
Required onSelectOption	`(value: string) => void`	This function will be called every time the selection changes. The value of the selected option will be passed as a parameter.	-
margin	`'xxsmall' \| 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'xxlarge' \| Margin`	Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.	-
size	`'small' \| 'medium' \| 'large' \| 'fillParent' \| 'fitContent'`	Size of the component.	`'fitContent'`
tabIndex	`number`	Value of the `tabindex` attribute.	`0`

Examples

Basic usage

() => {
  const selectOption = (value) => {
    console.log(value);
  };
  const options = [
    {
      value: 1,
      label: "Android",
    },
    {
      value: 2,
      label: "Windows",
    },
    {
      value: 3,
      label: "IOS",
    },
  ];

  return (
    <DxcInset space="2rem">
      <DxcDropdown
        label="Select platform"
        options={options}
        onSelectOption={selectOption}
      />
    </DxcInset>
  );
}

() => {
  const selectOption = (value) => {
    console.log(value);
  };
  const options = [
    {
      value: 1,
      label: "Android",
    },
    {
      value: 2,
      label: "Windows",
    },
    {
      value: 3,
      label: "IOS",
    },
  ];

  return (
    <DxcInset space="2rem">
      <DxcDropdown
        label="Select platform"
        options={options}
        onSelectOption={selectOption}
      />
    </DxcInset>
  );
}

Icons

() => {
  const selectOption = (value) => {
    console.log(value);
  };
  const options = [
    {
      value: 1,
      label: "Android",
      icon: "filled_phone_android",
    },
    {
      value: 2,
      label: "Windows",
      icon: "desktop_windows",
    },
    {
      value: 3,
      label: "IOS",
      icon: "filled_phone_iphone",
    },
  ];

  return (
    <DxcInset space="2rem">
      <DxcDropdown
        options={options}
        onSelectOption={selectOption}
        label="Select platform"
        icon="download"
      />
    </DxcInset>
  );
}

() => {
  const selectOption = (value) => {
    console.log(value);
  };
  const options = [
    {
      value: 1,
      label: "Android",
      icon: "filled_phone_android",
    },
    {
      value: 2,
      label: "Windows",
      icon: "desktop_windows",
    },
    {
      value: 3,
      label: "IOS",
      icon: "filled_phone_iphone",
    },
  ];

  return (
    <DxcInset space="2rem">
      <DxcDropdown
        options={options}
        onSelectOption={selectOption}
        label="Select platform"
        icon="download"
      />
    </DxcInset>
  );
}

Props
Examples
- Basic usage
- Icons

Edit this page on GitHub

Report an issue on GitHub

Divider

NextFile Input

Dropdown

Props

Examples

Basic usage

Icons

Contents