Select - Clay

A form control element used to select from several provided options and enter data.

SelectWithOption
API

Take a look at our Storybook for more information about this component.

Check the Lexicon Selectors Pattern for a more in-depth look at the motivations and proper usage of this component.

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 React from 'react';

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

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 React from 'react';

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

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'; } >		[]	Options of the select.