SelectOption

@coinbase/cds-web@8.13.6

A single option of a Select component.

Import

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

SourceView source codeStorybookView StorybookFigmaView Figma

---

Related components

• Select,
• ListCell

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}>
      <Select 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" />}
          />
        ))}
      </Select>
    </VStack>
  );
}