Skip to main content

Select

Examples

Select

View standalone
Code
<FormControl>
  <InputLabel htmlFor="example-select-1">
    A select option
  </InputLabel>
  <Select
    aria-label="meep"
    id="example-select-1"
  >
    <SelectOption
      id="1-1"
      value="1"
    >
      Lorem ipsum dolor sit
    </SelectOption>
    <SelectOption
      id="1-2"
      value="2"
    >
      Item 2
    </SelectOption>
  </Select>
</FormControl>

Select with a default selected value

View standalone
Code
<FormControl>
  <InputLabel htmlFor="example-select-2">
    A select option
  </InputLabel>
  <Select
    id="example-select-2"
    value="3"
  >
    <SelectOption
      id="2-1"
      value="1"
    >
      Lorem ipsum dolor sit
    </SelectOption>
    <SelectOption
      id="2-2"
      value="2"
    >
      Item 2
    </SelectOption>
    <SelectOption
      id="2-3"
      value="3"
    >
      Item 3
    </SelectOption>
  </Select>
</FormControl>

Select with start icon

View standalone
Code
<FormControl>
  <InputLabel htmlFor="example-select-3">
    A select option
  </InputLabel>
  <Select
    id="example-select-3"
    startIcon={<GlobeIcon />}
  >
    <SelectOption
      id="3-1"
      value="1"
    >
      Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
    </SelectOption>
    <SelectOption
      id="3-2"
      value="2"
    >
      Item 2
    </SelectOption>
  </Select>
</FormControl>

Select in disabled state

View standalone
Code
<FormControl>
  <InputLabel htmlFor="example-select-4">
    A select option
  </InputLabel>
  <Select
    disabled
    id="example-select-4"
  >
    <SelectOption
      id="4-1"
      value="1"
    >
      Nope
    </SelectOption>
  </Select>
</FormControl>

Select info variant

View standalone
Code
<FormControl>
  <InputLabel htmlFor="example-select-5">
    A select option
  </InputLabel>
  <Select
    id="example-select-5"
    startIcon={<GlobeIcon />}
    variant="info"
  >
    <SelectOption
      id="5-1"
      value="1"
    >
      Item 1
    </SelectOption>
  </Select>
</FormControl>

Select error variant

View standalone
Code
<FormControl>
  <InputLabel htmlFor="example-select-6">
    A select option
  </InputLabel>
  <Select
    id="example-select-6"
    invalid
  >
    <SelectOption
      id="6-1"
      value="1"
    >
      Item 1
    </SelectOption>
    <SelectOption
      id="6-2"
      value="2"
    >
      This is not a valid option
    </SelectOption>
  </Select>
</FormControl>

Select success variant

View standalone
Code
<FormControl>
  <InputLabel htmlFor="example-select-7">
    A select option
  </InputLabel>
  <Select
    id="example-select-7"
    success
  >
    <SelectOption
      id="7-1"
      value="1"
    >
      Item 1
    </SelectOption>
    <SelectOption
      id="7-2"
      value="2"
    >
      This was successfully submitted
    </SelectOption>
  </Select>
</FormControl>

Select with an innerClassName

View standalone
Code
<FormControl>
  <InputLabel htmlFor="example-select-8">
    A select option
  </InputLabel>
  <Select
    id="example-select-8"
    innerClassName="_1ekuxf40"
  >
    <SelectOption
      id="8-1"
      value="1"
    >
      Lorem ipsum dolor sit
    </SelectOption>
    <SelectOption
      id="8-2"
      value="2"
    >
      Item 2
    </SelectOption>
  </Select>
</FormControl>

Select with innerMargin false

View standalone
Code
<FormControl>
  <InputLabel htmlFor="example-select-9">
    A select option
  </InputLabel>
  <Select
    id="example-select-9"
  >
    <SelectOption
      id="9-1"
      value="1"
    >
      Lorem ipsum dolor sit
    </SelectOption>
    <SelectOption
      id="9-2"
      value="2"
    >
      Item 2
    </SelectOption>
  </Select>
</FormControl>

Props

Select

startIcon

ReactNode

Default: null

variant

"default" | "info"

Default: "default"

invalid

boolean

Default: false

success

boolean

Default: false

innerClassName

string

This classname will be applied to the inner `<select>` element

innerMargin

boolean

This classname will be applied to the inner flex `<div>` element

Default: true

SelectOption