Select - Clay

SelectWithOption
API

Introduction

ClaySelect and ClaySelect.Option are <select> and <option> elements respectivetly that are styled using ClayCSS classes.

ClaySelect represents a control that provides a menu of options (ClaySelect.Option). ClaySelect.Option defines an option in a select list.

Use ClaySelect.Option for wrapping an option item.

import {ClaySelect} from '@clayui/form';

import {ClaySelect} from '@clayui/form';

const Component = () => {
  const options = [
    {
      label: "Option 1",
      value: "1"
    },
    {
      label: "Option 2",
      value: "2"
    }
  ];
  return (
    <ClaySelect aria-label="Select Label" id="mySelectId">
      {options.map(item => (
        <ClaySelect.Option
          key={item.value}
          label={item.label}
          value={item.value}
        />
      ))}
    </ClaySelect>
  );
};

render(<Component />);

const Component = () => {
  const options = [
    {
      label: "Option 1",
      value: "1"
    },
    {
      label: "Option 2",
      value: "2"
    }
  ];
  return (
    <ClaySelect aria-label="Select Label" id="mySelectId">
      {options.map(item => (
        <ClaySelect.Option
          key={item.value}
          label={item.label}
          value={item.value}
        />
      ))}
    </ClaySelect>
  );
};
render(<Component />);

SelectWithOption

If you use ClaySelect only for simple cases that do not need props for options, you can use <ClaySelectWithOption /> which will have the same result as the previous version.

import {ClaySelectWithOption} from '@clayui/form';

import {ClaySelectWithOption} from '@clayui/form';

const Component = () => {
  const options = [
    {
      label: "Option 1",
      value: "1"
    },
    {
      label: "Option 2",
      value: "2"
    }
  ];
  return (
    <ClaySelectWithOption
      aria-label="Select Label"
      id="mySelectId"
      options={options}
    />
  );
};

render(<Component />);

const Component = () => {
  const options = [
    {
      label: "Option 1",
      value: "1"
    },
    {
      label: "Option 2",
      value: "2"
    }
  ];
  return (
    <ClaySelectWithOption
      aria-label="Select Label"
      id="mySelectId"
      options={options}
    />
  );
};
render(<Component />);

API

ClaySelect have the same React API of <select> element. Also, ClaySelect.Option has the same API of <option> React element.

SelectWithOption

Property	Type	Required	Default	Description
options	Array< ( \| React.ComponentProps<typeof Select.Option> \| React.ComponentProps<typeof Select.OptGroup> ) & { options?: Array<React.ComponentProps<typeof Select.Option>>; type?: 'group'; } >	false	[]	Options of the select.