Select

Allows users to select one or more values from a list.

Import

import { Select, SelectButton, SelectList, SelectOption } from '@saas-ui/react'

Usage

Basic Usage

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

Sizes

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

Multi select

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

Custom options

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

import { Image, HStack, MenuDivider } from '@chakra-ui/react'
import { Select, SelectButton, SelectList, SelectOption } from '@saas-ui/react'
export default function CatSelect() {
return (
<Select name="interest" placeholder="Select your favourite cat">
<SelectButton />
<SelectList>
<SelectOption value="No cats">I don't like cats</SelectOption>
<MenuDivider />
<SelectOption 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>
</SelectOption>
<SelectOption 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>
</SelectOption>
</SelectList>
</Select>
)
}

Was this helpful?