Dropdown

Ready

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.

Code

Usage

Specifications

Props

Name	Default	Description
options: object[]		An array of objects representing the options. Each object has the following properties: label: Option display value. icon: Element or path used as the icon that will be placed next to the option label. value: Option inner value.
optionsIconPosition: 'before' \| 'after'	`'before'`	In case options include icons, whether the icon should appear after or before the label.
icon: node \| string		Element or path used as the icon that will be placed next to the dropdown label.
iconPosition: 'before' \| 'after'	`'before'`	Whether the icon should appear after or before the label.
label: string		Text to be placed within the dropdown.
caretHidden: boolean	`false`	Whether the arrow next to the label must be displayed or not.
disabled: boolean	`false`	If true, the component will be disabled.
expandOnHover: boolean	`false`	If true, the options are showed when the dropdown is hover.
onSelectOption: function		This function will be called every time the selection changes. The value of the selected option will be passed as a parameter.
margin: string \| object		Size of the margin to be applied to the component ('xxsmall' \| 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
size: string	`'fitContent'`	Size of the component ('small' \| 'medium' \| 'large' \| 'fitContent' \| 'fillParent' ).
tabIndex: number	`0`	Value of the tabindex.

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}
      ></DxcDropdown>
    </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}
      ></DxcDropdown>
    </DxcInset>
  );
}

Icons

() => {
  const downloadIcon = (
    <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20">
      <path d="M5.5 17Q4.875 17 4.438 16.562Q4 16.125 4 15.5V14H5.5V15.5Q5.5 15.5 5.5 15.5Q5.5 15.5 5.5 15.5H14.5Q14.5 15.5 14.5 15.5Q14.5 15.5 14.5 15.5V14H16V15.5Q16 16.125 15.562 16.562Q15.125 17 14.5 17ZM10 14 6 10 7.062 8.938 9.25 11.125V4H10.75V11.125L12.938 8.938L14 10Z" />
    </svg>
  );
  const androidIcon = (
    <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20">
      <path d="M0.833 15Q1.042 12.771 2.208 10.896Q3.375 9.021 5.333 7.917L3.792 5.25Q3.688 5.062 3.74 4.854Q3.792 4.646 4 4.542Q4.167 4.438 4.375 4.5Q4.583 4.562 4.708 4.75L6.229 7.417Q8.021 6.667 10 6.667Q11.979 6.667 13.771 7.417L15.292 4.75Q15.417 4.562 15.625 4.5Q15.833 4.438 16 4.542Q16.208 4.646 16.271 4.854Q16.333 5.062 16.208 5.25L14.667 7.917Q16.625 9.021 17.792 10.896Q18.958 12.771 19.167 15ZM5.833 12.708Q6.271 12.708 6.573 12.406Q6.875 12.104 6.875 11.667Q6.875 11.229 6.573 10.927Q6.271 10.625 5.833 10.625Q5.396 10.625 5.094 10.927Q4.792 11.229 4.792 11.667Q4.792 12.104 5.094 12.406Q5.396 12.708 5.833 12.708ZM14.188 12.708Q14.625 12.708 14.927 12.406Q15.229 12.104 15.229 11.667Q15.229 11.229 14.927 10.927Q14.625 10.625 14.188 10.625Q13.75 10.625 13.448 10.927Q13.146 11.229 13.146 11.667Q13.146 12.104 13.448 12.406Q13.75 12.708 14.188 12.708Z" />
    </svg>
  );
  const pcIcon = (
    <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20">
      <path d="M6.604 18.333V16.583H8.25V15H3.417Q2.688 15 2.177 14.49Q1.667 13.979 1.667 13.25V4.25Q1.667 3.521 2.177 3.01Q2.688 2.5 3.417 2.5H16.583Q17.312 2.5 17.823 3.01Q18.333 3.521 18.333 4.25V13.25Q18.333 13.979 17.823 14.49Q17.312 15 16.583 15H11.75V16.583H13.396V18.333ZM3.417 13.25H16.583Q16.583 13.25 16.583 13.25Q16.583 13.25 16.583 13.25V4.25Q16.583 4.25 16.583 4.25Q16.583 4.25 16.583 4.25H3.417Q3.417 4.25 3.417 4.25Q3.417 4.25 3.417 4.25V13.25Q3.417 13.25 3.417 13.25Q3.417 13.25 3.417 13.25ZM3.417 13.25Q3.417 13.25 3.417 13.25Q3.417 13.25 3.417 13.25V4.25Q3.417 4.25 3.417 4.25Q3.417 4.25 3.417 4.25Q3.417 4.25 3.417 4.25Q3.417 4.25 3.417 4.25V13.25Q3.417 13.25 3.417 13.25Q3.417 13.25 3.417 13.25Z" />
    </svg>
  );
  const iosIcon = (
    <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20">
      <path d="M10.021 16.979Q10.375 16.979 10.635 16.719Q10.896 16.458 10.896 16.104Q10.896 15.75 10.635 15.49Q10.375 15.229 10.021 15.229Q9.667 15.229 9.406 15.49Q9.146 15.75 9.146 16.104Q9.146 16.458 9.406 16.719Q9.667 16.979 10.021 16.979ZM5.917 13.042H14.083V5.208H5.917ZM5.917 19.167Q5.188 19.167 4.677 18.656Q4.167 18.146 4.167 17.417V2.583Q4.167 1.854 4.677 1.344Q5.188 0.833 5.917 0.833H14.083Q14.812 0.833 15.323 1.344Q15.833 1.854 15.833 2.583V17.417Q15.833 18.146 15.323 18.656Q14.812 19.167 14.083 19.167ZM5.917 3.458H14.083V2.583Q14.083 2.583 14.083 2.583Q14.083 2.583 14.083 2.583H5.917Q5.917 2.583 5.917 2.583Q5.917 2.583 5.917 2.583ZM5.917 2.583Q5.917 2.583 5.917 2.583Q5.917 2.583 5.917 2.583V3.458V2.583Q5.917 2.583 5.917 2.583Q5.917 2.583 5.917 2.583ZM5.917 14.792V17.417Q5.917 17.417 5.917 17.417Q5.917 17.417 5.917 17.417H14.083Q14.083 17.417 14.083 17.417Q14.083 17.417 14.083 17.417V14.792ZM5.917 17.417Q5.917 17.417 5.917 17.417Q5.917 17.417 5.917 17.417V14.792V17.417Q5.917 17.417 5.917 17.417Q5.917 17.417 5.917 17.417Z" />
    </svg>
  );
  const selectOption = (value) => {
    console.log(value);
  };
  const options = [
    {
      value: 1,
      label: "Android",
      icon: androidIcon,
    },
    {
      value: 2,
      label: "Windows",
      icon: pcIcon,
    },
    {
      value: 3,
      label: "IOS",
      icon: iosIcon,
    },
  ];

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

() => {
  const downloadIcon = (
    <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20">
      <path d="M5.5 17Q4.875 17 4.438 16.562Q4 16.125 4 15.5V14H5.5V15.5Q5.5 15.5 5.5 15.5Q5.5 15.5 5.5 15.5H14.5Q14.5 15.5 14.5 15.5Q14.5 15.5 14.5 15.5V14H16V15.5Q16 16.125 15.562 16.562Q15.125 17 14.5 17ZM10 14 6 10 7.062 8.938 9.25 11.125V4H10.75V11.125L12.938 8.938L14 10Z" />
    </svg>
  );
  const androidIcon = (
    <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20">
      <path d="M0.833 15Q1.042 12.771 2.208 10.896Q3.375 9.021 5.333 7.917L3.792 5.25Q3.688 5.062 3.74 4.854Q3.792 4.646 4 4.542Q4.167 4.438 4.375 4.5Q4.583 4.562 4.708 4.75L6.229 7.417Q8.021 6.667 10 6.667Q11.979 6.667 13.771 7.417L15.292 4.75Q15.417 4.562 15.625 4.5Q15.833 4.438 16 4.542Q16.208 4.646 16.271 4.854Q16.333 5.062 16.208 5.25L14.667 7.917Q16.625 9.021 17.792 10.896Q18.958 12.771 19.167 15ZM5.833 12.708Q6.271 12.708 6.573 12.406Q6.875 12.104 6.875 11.667Q6.875 11.229 6.573 10.927Q6.271 10.625 5.833 10.625Q5.396 10.625 5.094 10.927Q4.792 11.229 4.792 11.667Q4.792 12.104 5.094 12.406Q5.396 12.708 5.833 12.708ZM14.188 12.708Q14.625 12.708 14.927 12.406Q15.229 12.104 15.229 11.667Q15.229 11.229 14.927 10.927Q14.625 10.625 14.188 10.625Q13.75 10.625 13.448 10.927Q13.146 11.229 13.146 11.667Q13.146 12.104 13.448 12.406Q13.75 12.708 14.188 12.708Z" />
    </svg>
  );
  const pcIcon = (
    <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20">
      <path d="M6.604 18.333V16.583H8.25V15H3.417Q2.688 15 2.177 14.49Q1.667 13.979 1.667 13.25V4.25Q1.667 3.521 2.177 3.01Q2.688 2.5 3.417 2.5H16.583Q17.312 2.5 17.823 3.01Q18.333 3.521 18.333 4.25V13.25Q18.333 13.979 17.823 14.49Q17.312 15 16.583 15H11.75V16.583H13.396V18.333ZM3.417 13.25H16.583Q16.583 13.25 16.583 13.25Q16.583 13.25 16.583 13.25V4.25Q16.583 4.25 16.583 4.25Q16.583 4.25 16.583 4.25H3.417Q3.417 4.25 3.417 4.25Q3.417 4.25 3.417 4.25V13.25Q3.417 13.25 3.417 13.25Q3.417 13.25 3.417 13.25ZM3.417 13.25Q3.417 13.25 3.417 13.25Q3.417 13.25 3.417 13.25V4.25Q3.417 4.25 3.417 4.25Q3.417 4.25 3.417 4.25Q3.417 4.25 3.417 4.25Q3.417 4.25 3.417 4.25V13.25Q3.417 13.25 3.417 13.25Q3.417 13.25 3.417 13.25Z" />
    </svg>
  );
  const iosIcon = (
    <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20">
      <path d="M10.021 16.979Q10.375 16.979 10.635 16.719Q10.896 16.458 10.896 16.104Q10.896 15.75 10.635 15.49Q10.375 15.229 10.021 15.229Q9.667 15.229 9.406 15.49Q9.146 15.75 9.146 16.104Q9.146 16.458 9.406 16.719Q9.667 16.979 10.021 16.979ZM5.917 13.042H14.083V5.208H5.917ZM5.917 19.167Q5.188 19.167 4.677 18.656Q4.167 18.146 4.167 17.417V2.583Q4.167 1.854 4.677 1.344Q5.188 0.833 5.917 0.833H14.083Q14.812 0.833 15.323 1.344Q15.833 1.854 15.833 2.583V17.417Q15.833 18.146 15.323 18.656Q14.812 19.167 14.083 19.167ZM5.917 3.458H14.083V2.583Q14.083 2.583 14.083 2.583Q14.083 2.583 14.083 2.583H5.917Q5.917 2.583 5.917 2.583Q5.917 2.583 5.917 2.583ZM5.917 2.583Q5.917 2.583 5.917 2.583Q5.917 2.583 5.917 2.583V3.458V2.583Q5.917 2.583 5.917 2.583Q5.917 2.583 5.917 2.583ZM5.917 14.792V17.417Q5.917 17.417 5.917 17.417Q5.917 17.417 5.917 17.417H14.083Q14.083 17.417 14.083 17.417Q14.083 17.417 14.083 17.417V14.792ZM5.917 17.417Q5.917 17.417 5.917 17.417Q5.917 17.417 5.917 17.417V14.792V17.417Q5.917 17.417 5.917 17.417Q5.917 17.417 5.917 17.417Z" />
    </svg>
  );
  const selectOption = (value) => {
    console.log(value);
  };
  const options = [
    {
      value: 1,
      label: "Android",
      icon: androidIcon,
    },
    {
      value: 2,
      label: "Windows",
      icon: pcIcon,
    },
    {
      value: 3,
      label: "IOS",
      icon: iosIcon,
    },
  ];

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

Props
Examples
- Basic usage
- Icons

Edit this page on GitHub

Dialog

NextFile Input

Dropdown

Props

Examples

Basic usage

Icons

Contents