Select

A custom select component.

Import#

import { Select } from '@saas-ui/react'

Usage#

Basic Usage#

<Select
  name="country"
  placeholder="Select a country"
  options={[
    { label: 'Netherlands', value: 'nl' },
    { label: 'USA', value: 'us' },
  ]}
/>

Sizes#

<Stack spacing={4}>
  <Select
    name="country"
    placeholder="Select a country"
    options={[
      { label: 'Netherlands', value: 'nl' },
      { label: 'USA', value: 'us' },
    ]}
    size="lg"
  />


  <Select
    name="country"
    placeholder="Select a country"
    options={[
      { label: 'Netherlands', value: 'nl' },
      { label: 'USA', value: 'us' },
    ]}
    size="md"
  />


  <Select
    name="country"
    placeholder="Select a country"
    options={[
      { label: 'Netherlands', value: 'nl' },
      { label: 'USA', value: 'us' },
    ]}
    size="sm"
  />


  <Select
    name="country"
    placeholder="Select a country"
    options={[
      { label: 'Netherlands', value: 'nl' },
      { label: 'USA', value: 'us' },
    ]}
    size="xs"
  />
</Stack>

Multi select#

<Select
  name="interest"
  placeholder="Select your interests"
  options={[
    { value: 'Cars' },
    { value: 'Cooking' },
    { value: 'Reading' },
    { value: 'Hiking' },
    { value: 'Traveling' },
  ]}
  multiple
/>

Custom options#

Alternatively you can use MenuItemOption to compose the select options, which gives you full control and flexibility.

<Select name="interest" placeholder="Select your favourite cat">
  <MenuItemOption value="No cats">I don't like cats</MenuItemOption>
  <MenuDivider />
  <MenuItemOption value="Fluffybuns the Destroyer">
    <HStack>
      <Image
        boxSize="2rem"
        borderRadius="full"
        src="https://placekitten.com/100/100"
        alt="Fluffybuns the destroyer"
        mr="12px"
      />
      <span>Fluffybuns the Destroyer</span>
    </HStack>
  </MenuItemOption>
  <MenuItemOption value="Simon the pensive">
    <HStack>
      <Image
        boxSize="2rem"
        borderRadius="full"
        src="https://placekitten.com/120/120"
        alt="Simon the pensive"
        mr="12px"
      />
      <span>Simon the pensive</span>
    </HStack>
  </MenuItemOption>
</Select>

Props#

Select renders a Menu and accepts all of it's props. See: Chakra UI docs

menuListProps

Description

Props passed to the MenuList.

Type
MenuListProps

multiple

Description

Enable multiple select.

Type
boolean

options

Description

An array of options If you leave this empty the children prop will be rendered.

Type
Option[]

renderValue

Description

Customize how the value is rendered.

Type
(value?: string[]) => React.ReactElement

Was this helpful?