SelectOption

@coinbase/cds-web@8.21.3

A single option of a Select component.

󰣸

This component is deprecated. Please use the new Select alpha component instead.

Import

import { SelectOption } from '@coinbase/cds-web/controls/SelectOption'

SourceView source codeStorybookView StorybookFigmaView Figma (internal only)

---

Related components

• Select,
• ListCell

---

󰏖

View as Markdown

Web

SelectOption has the same API as a ListCell, but with custom styles specific to usage within a Select. SelectOption also comes with a lot of baked in functionality, like keyboard navigation, accessibility properties, and focus behaviors.

Default Composition

Loading...

󰙡

Live Code

function DefaultSelect() {
  const [value, setValue] = useState();
  const options = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5', 'Option 6'];
  return (
    <VStack paddding={2}>
      <OldSelect value={value} placeholder="Choose something..." onChange={setValue}>
        {options.map((option) => (
          <SelectOption
            value={option}
            key={option}
            title={option}
            description="Description"
            media={<CellMedia type="icon" name="upload" />}
          />
        ))}
      </OldSelect>
    </VStack>
  );
}