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?