Forma 36
v4.0.2

Select

View on Github

Select allows users to make a single selection from an options menu. Keep in mind that Select should not be used without the label.

How to use Select

  • Use Select to present many different options in one component
  • When you have only a few options try to show them all at once, using Radio.
  • Use Select in Forms
  • Order the list of options in a logical way, so it make sense for the user
  • Don't use Select for a very long list of options, instead for those cases use Autocomplete

Using as a controlled select

To use the Select as controlled, you need to provide the value of one of the options as the value prop for the Select, and the onChange handler.

const ExampleControlled = () => {
  const [selectValue, setSelectValue] = useState('optionOne');
  const handleOnChange = (event) => setSelectedValue(event.target.value);


  return (
    <Select
      id="optionSelect-controlled"
      name="optionSelect-controlled"
      value={selectValue}
      onChange={handleOnChange}
    >
      <Select.Option value="optionOne">Option 1</Select.Option>
      <Select.Option value="optionTwo">Long Option 2</Select.Option>
    </Select>
  );
};

Using as an uncontrolled select

To use the Select as uncontrolled, you shouldn't pass the value prop, if you want to have an option selected by default, you can instead use the defaultValue prop.

<Select
  id="optionSelect-controlled"
  name="optionSelect-controlled"
  defaultValue="optionOne"
>
  <Select.Option value="optionOne">Option 1</Select.Option> // This option would
  be selected by default
  <Select.Option value="optionTwo">Long Option 2</Select.Option>
</Select>

Select vs dropdown

  1. Dropdown menus are typically used for navigation or command menus, where an action is initiated based on the selection.
  2. Select is a type of input, where the user is choosing one option from the list, typically used in Forms.

Code examples

Select with label

In order to provide the best experience for your users consider using label that we provide for you in the FormControl

Select with validation

There might be cases where you would need to include the help text or validation message into your form. Read more about those elements in FormControl documentation

Select state disabled

Select with placeholder

Select with error

Content guidelines

  • Options should be written in sentence case (the first word capitalized, the rest lowercase).
  • Options should be labeled in a clear way, so it's obvious what the option will do

Accessibility

  • Select should contain a label, if needed help message and validation message if needed.
  • Select should always a name property.

Props

Select

  • Name

    children(required)

    ReactNode
  • Name

    className

    Description

    CSS class to be appended to the root element

    string
  • Name

    defaultValue

    string
    Default
    undefined
  • Name

    isDisabled

    false
    true
  • Name

    isInvalid

    false
    true
  • Name

    isRequired

    false
    true
  • Name

    onChange

    ChangeEventHandler<HTMLSelectElement>
  • Name

    size

    "small"
    "medium"
    Default
    medium
  • Name

    testId

    Description

    A [data-test-id] attribute used for testing purposes

    string
    Default
    cf-ui-select
  • Name

    value

    string
    Default
    undefined
  • Name

    willBlurOnEsc

    false
    true
    Default
    true

Select Option

  • Name

    className

    Description

    CSS class to be appended to the root element

    string
  • Name

    isDisabled

    false
    true
  • Name

    testId

    Description

    A [data-test-id] attribute used for testing purposes

    string
    Default
    cf-ui-select-option

Help improve this page

Edit on GithubRead the contribution guide