DXC Logo
Halstack Design System
v16.1.0

Overview

Guidelines

Foundations

Migration

Utilities

Components

Dropdown

The dropdown component is a compact, interactive element that allows users to select from a list of options, reducing clutter in the interface.

Overview
Code

Props

NameTypeDescriptionDefault
caretHiddenbooleanWhether the arrow next to the label must be displayed or not.false
disabledbooleanIf true, the component will be disabled.false
expandOnHoverbooleanIf true, the options are shown when the dropdown is hovered.false
iconstring | (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'
labelstringText to be placed within the dropdown.-
margin'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | MarginSize 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.-
Required
onSelectOption
(value: string) => voidThis function will be called every time the selection changes. The value of the selected option will be passed as a parameter.-
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'
size'small' | 'medium' | 'large' | 'fillParent' | 'fitContent'Size of the component.'fitContent'
tabIndexnumberValue of the tabindex attribute.0
titlestringText representing advisory information related to the dropdown's trigger action. Under the hood, this prop also serves as an accessible label for the component.-

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="var(--spacing-padding-xl)">
      <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="var(--spacing-padding-xl)">
      <DxcDropdown
        options={options}
        onSelectOption={selectOption}
        label="Select platform"
        icon="download"
      />
    </DxcInset>
  );
}
On this page