Props passed to the MenuList.
Select
A custom select component.
Import#
import { Select } from '@saas-ui/react'
Usage#
Basic Usage#
<Selectname="country"placeholder="Select a country"options={[{ label: 'Netherlands', value: 'nl' },{ label: 'USA', value: 'us' },]}/>
Sizes#
<Stack spacing={4}><Selectname="country"placeholder="Select a country"options={[{ label: 'Netherlands', value: 'nl' },{ label: 'USA', value: 'us' },]}size="lg"/><Selectname="country"placeholder="Select a country"options={[{ label: 'Netherlands', value: 'nl' },{ label: 'USA', value: 'us' },]}size="md"/><Selectname="country"placeholder="Select a country"options={[{ label: 'Netherlands', value: 'nl' },{ label: 'USA', value: 'us' },]}size="sm"/><Selectname="country"placeholder="Select a country"options={[{ label: 'Netherlands', value: 'nl' },{ label: 'USA', value: 'us' },]}size="xs"/></Stack>
Multi select#
<Selectname="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><ImageboxSize="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><ImageboxSize="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
menuListProps
Description
Type
MenuListProps
multiple
multiple
Description
Enable multiple select.
Type
boolean
options
options
Description
An array of options If you leave this empty the children prop will be rendered.
Type
Option[]
renderValue
renderValue
Description
Customize how the value is rendered.
Type
(value?: string[]) => React.ReactElement
Was this helpful?