Select

Ready

The select component allows users to make single or multiple selections from a pre-defined list of options.

Code

Usage

Specifications

Props

Name	Default	Description
defaultValue: string \| string[]		Initial value of the select, only when it is uncontrolled.
value: string \| string[]		Value of the select. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
label: string		Text to be placed above the select.
name: string		Name attribute of the input element. This attribute will allow users to find the component's value during the submit event. In this event, the component's value will always be a regular string, for both single and multiple selection modes, been in the first one a single option value and in the multiple variant more than one option value, separated by commas.
options: Option[] \| OptionGroup[]		An array of objects representing the selectable options. Each object has the following properties depending on whether it is a regular option or a group: Option: Label: string: Label of the option to be shown in the select's listbox. Value: string: Value of the option. It should be unique and not an empty string, which is reserved to the empty option added by optional prop. Icon: string \| SVGSVGElement: Element used as the icon that will be placed before the option label. It can be a url of an image or an inline SVG. If the url option is the chosen one, take into account that the component's color styling tokens will not be applied to the image. OptionGroup: Label: string: Label of the group to be shown in the select's listbox. Options: Option[]: List of the grouped options.
helperText: string		Helper text to be placed above the select.
placeholder: string		Text to be put as placeholder of the select.
searchable: boolean	`false`	If true, enables search functionality.
multiple: boolean	`false`	If true, the select component will support multiple selected options. In that case, value will be an array of strings with each selected option value.
disabled: boolean	`false`	If true, the component will be disabled.
optional: boolean	`false`	If true, the select will be optional, showing '(Optional)' next to the label and adding a default first option with an empty string as value and the placeholder (if defined) as its label. Otherwise, the field will be considered required and an error will be passed as a parameter to the OnBlur and onChange functions if an option wasn't selected.
onChange: function		This function will be called when the user selects an option. An object including the new value (or values) and the error (if the value selected is not valid) will be passed to this function. An example of this object is:`{ value: value, error: error }`. If there is no error, error will not be defined.
onBlur: function		This function will be called when the select loses the focus. An object including the value (or values) and the error (if the value selected is not valid) will be passed to this function. An example of this object is: `{ value: value, error: error }`. If there is no error, error will not be defined.
error: string		If it is a defined value and also a truthy string, the component will change its appearance, showing the error below the select component. If the defined value is an empty string, it will reserve a space below the component for a future error, but it would not change its look. In case of being undefined or null, both the appearance and the space for the error message would not be modified.
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	`'medium'`	Size of the component ('small' \| 'medium' \| 'large' \| 'fillParent').
tabIndex: number	`0`	Value of the tabindex attribute.
ref: object		Reference to the component.

Examples

Controlled

() => {
  const [value, setValue] = useState("");
  const onChange = ({ value }) => {
    setValue(value);
  };
  const onBlur = ({ value, error }) => {
    setValue(value);
  };

  const options = [
    { label: "Madrid", value: "madrid" },
    { label: "Melbourne", value: "melbourne" },
    { label: "London", value: "london" },
    { label: "Roma", value: "roma" },
  ];

  return (
    <DxcInset space="2rem">
      <DxcSelect
        label="Select your favorite city"
        placeholder="Choose a city"
        options={options}
        value={value}
        onBlur={onBlur}
        onChange={onChange}
      />
    </DxcInset>
  );
}

() => {
  const [value, setValue] = useState("");
  const onChange = ({ value }) => {
    setValue(value);
  };
  const onBlur = ({ value, error }) => {
    setValue(value);
  };

  const options = [
    { label: "Madrid", value: "madrid" },
    { label: "Melbourne", value: "melbourne" },
    { label: "London", value: "london" },
    { label: "Roma", value: "roma" },
  ];

  return (
    <DxcInset space="2rem">
      <DxcSelect
        label="Select your favorite city"
        placeholder="Choose a city"
        options={options}
        value={value}
        onBlur={onBlur}
        onChange={onChange}
      />
    </DxcInset>
  );
}

Uncontrolled

() => {
  const selectRef = useRef();
  const handleSubmit = () => {
    const select = selectRef.current.getElementsByTagName("input")[0];
    console.log(select.value);
  };
  const options = [
    { label: "Madrid", value: "madrid" },
    { label: "Melbourne", value: "melbourne" },
    { label: "London", value: "london" },
    { label: "Roma", value: "roma" },
  ];

  return (
    <DxcInset space="2rem">
      <DxcFlex direction="column" gap="2rem" alignItems="flex-start">
        <DxcSelect
          label="Select your favorite city"
          placeholder="Choose a city"
          defaultValue="madrid"
          options={options}
          ref={selectRef}
        />
        <DxcButton onClick={handleSubmit} label="Submit" />
      </DxcFlex>
    </DxcInset>
  );
}

() => {
  const selectRef = useRef();
  const handleSubmit = () => {
    const select = selectRef.current.getElementsByTagName("input")[0];
    console.log(select.value);
  };
  const options = [
    { label: "Madrid", value: "madrid" },
    { label: "Melbourne", value: "melbourne" },
    { label: "London", value: "london" },
    { label: "Roma", value: "roma" },
  ];

  return (
    <DxcInset space="2rem">
      <DxcFlex direction="column" gap="2rem" alignItems="flex-start">
        <DxcSelect
          label="Select your favorite city"
          placeholder="Choose a city"
          defaultValue="madrid"
          options={options}
          ref={selectRef}
        />
        <DxcButton onClick={handleSubmit} label="Submit" />
      </DxcFlex>
    </DxcInset>
  );
}

Error handling

() => {
  const [value, setValue] = useState("");
  const [error, setError] = useState();
  const onChange = ({ value }) => {
    setValue(value);
  };
  const onBlur = ({ value, error }) => {
    setValue(value);
    setError(error);
  };

  const options = [
    { label: "Madrid", value: "madrid" },
    { label: "Melbourne", value: "melbourne" },
    { label: "London", value: "london" },
    { label: "Roma", value: "roma" },
  ];

  return (
    <DxcInset space="2rem">
      <DxcSelect
        label="Select your favorite city"
        placeholder="Choose a city"
        options={options}
        value={value}
        onBlur={onBlur}
        onChange={onChange}
        error={error == undefined ? "" : error}
      />
    </DxcInset>
  );
}

() => {
  const [value, setValue] = useState("");
  const [error, setError] = useState();
  const onChange = ({ value }) => {
    setValue(value);
  };
  const onBlur = ({ value, error }) => {
    setValue(value);
    setError(error);
  };

  const options = [
    { label: "Madrid", value: "madrid" },
    { label: "Melbourne", value: "melbourne" },
    { label: "London", value: "london" },
    { label: "Roma", value: "roma" },
  ];

  return (
    <DxcInset space="2rem">
      <DxcSelect
        label="Select your favorite city"
        placeholder="Choose a city"
        options={options}
        value={value}
        onBlur={onBlur}
        onChange={onChange}
        error={error == undefined ? "" : error}
      />
    </DxcInset>
  );
}

Grouped options

() => {
  const options = [
    {
      label: "Managers",
      options: [
        { label: "Pablo", value: "pablo" },
        { label: "Marcos", value: "marcos" },
        { label: "Rachel", value: "rachel" },
        { label: "Margaret", value: "margaret" },
      ],
    },
    {
      label: "Engineers",
      options: [
        { label: "Yiminghe", value: "yiminghe" },
        { label: "Manuel", value: "manuel" },
        { label: "Bryan", value: "bryan" },
        { label: "Anand", value: "anand" },
        { label: "Jiale", value: "jiale" },
      ],
    },
    {
      label: "Designers",
      options: [
        { label: "Alex", value: "alex" },
        { label: "Tim", value: "tim" },
        { label: "Jairo", value: "Jairo" },
      ],
    },
  ];

  return (
    <DxcInset space="2rem">
      <DxcSelect
        label="Select your coworkers"
        placeholder="Choose a colleague"
        options={options}
        multiple
      />
    </DxcInset>
  );
}

() => {
  const options = [
    {
      label: "Managers",
      options: [
        { label: "Pablo", value: "pablo" },
        { label: "Marcos", value: "marcos" },
        { label: "Rachel", value: "rachel" },
        { label: "Margaret", value: "margaret" },
      ],
    },
    {
      label: "Engineers",
      options: [
        { label: "Yiminghe", value: "yiminghe" },
        { label: "Manuel", value: "manuel" },
        { label: "Bryan", value: "bryan" },
        { label: "Anand", value: "anand" },
        { label: "Jiale", value: "jiale" },
      ],
    },
    {
      label: "Designers",
      options: [
        { label: "Alex", value: "alex" },
        { label: "Tim", value: "tim" },
        { label: "Jairo", value: "Jairo" },
      ],
    },
  ];

  return (
    <DxcInset space="2rem">
      <DxcSelect
        label="Select your coworkers"
        placeholder="Choose a colleague"
        options={options}
        multiple
      />
    </DxcInset>
  );
}

Icons

() => {
  const url_options = [
    {
      label: "Social Media",
      options: [
        {
          label: "Instagram",
          value: "instagram",
          icon: "https://cdn.pixabay.com/photo/2021/06/15/12/17/instagram-6338401_960_720.png",
        },
        {
          label: "Twitter",
          value: "twitter",
          icon: "https://www.iconpacks.net/icons/2/free-twitter-logo-icon-2429-thumb.png",
        },
        {
          label: "Facebook",
          value: "facebook",
          icon: "https://cdn.icon-icons.com/icons2/2108/PNG/512/facebook_icon_130940.png",
        },
        {
          label: "Pinterest",
          value: "pinterest",
          icon: "https://cdn-icons-png.flaticon.com/512/145/145808.png",
        },
      ],
    },
    {
      label: "Design",
      options: [
        {
          label: "Figma",
          value: "figma",
          icon: "https://logowik.com/content/uploads/images/figma.jpg",
        },
        {
          label: "Adobe XD",
          value: "adobexd",
          icon: "https://cdn.worldvectorlogo.com/logos/adobe-xd-2.svg",
        },
        {
          label: "Sketch",
          value: "sketch",
          icon: "https://cdn.worldvectorlogo.com/logos/sketch-2.svg",
        },
      ],
    },
  ];

  return (
    <DxcInset space="2rem">
      <DxcSelect
        label="Select your favourite social media"
        placeholder="Choose an option"
        options={url_options}
      />
    </DxcInset>
  );
}

() => {
  const url_options = [
    {
      label: "Social Media",
      options: [
        {
          label: "Instagram",
          value: "instagram",
          icon: "https://cdn.pixabay.com/photo/2021/06/15/12/17/instagram-6338401_960_720.png",
        },
        {
          label: "Twitter",
          value: "twitter",
          icon: "https://www.iconpacks.net/icons/2/free-twitter-logo-icon-2429-thumb.png",
        },
        {
          label: "Facebook",
          value: "facebook",
          icon: "https://cdn.icon-icons.com/icons2/2108/PNG/512/facebook_icon_130940.png",
        },
        {
          label: "Pinterest",
          value: "pinterest",
          icon: "https://cdn-icons-png.flaticon.com/512/145/145808.png",
        },
      ],
    },
    {
      label: "Design",
      options: [
        {
          label: "Figma",
          value: "figma",
          icon: "https://logowik.com/content/uploads/images/figma.jpg",
        },
        {
          label: "Adobe XD",
          value: "adobexd",
          icon: "https://cdn.worldvectorlogo.com/logos/adobe-xd-2.svg",
        },
        {
          label: "Sketch",
          value: "sketch",
          icon: "https://cdn.worldvectorlogo.com/logos/sketch-2.svg",
        },
      ],
    },
  ];

  return (
    <DxcInset space="2rem">
      <DxcSelect
        label="Select your favourite social media"
        placeholder="Choose an option"
        options={url_options}
      />
    </DxcInset>
  );
}

Edit this page on GitHub

Resultset Table

NextSidenav

Select

Props

Examples

Controlled

Uncontrolled

Error handling

Grouped options

Icons

Contents