Getting started

Overview

Frameworks

Forms

Select

Used to pick a value from predefined options.

Select framework

'use client'

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

export const SelectBasic = () => {
  return (
    <Select.Root collection={frameworks} size="sm" width="320px">
      <Select.Label>Select framework</Select.Label>
      <Select.Trigger>
        <Select.ValueText placeholder="Select movie" />
      </Select.Trigger>
      <Select.Content>
        {frameworks.items.map((movie) => (
          <Select.Item item={movie} key={movie.value}>
            {movie.label}
          </Select.Item>
        ))}
      </Select.Content>
    </Select.Root>
  )
}

const frameworks = createListCollection({
  items: [
    { label: 'React.js', value: 'react' },
    { label: 'Vue.js', value: 'vue' },
    { label: 'Angular', value: 'angular' },
    { label: 'Svelte', value: 'svelte' },
  ],
})

Anatomy

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

<Select.Root items={[]}>
  <Select.Label />
  <Select.Trigger>
    <Select.ValueText placeholder="Select" />
  </Select.Trigger>
  <Select.Content>
    <Select.Item />
  </Select.Content>
</Select.Root>

Examples

Sizes

Use the size prop to change the size of the select component.

size = xs

size = sm

size = md

size = lg

'use client'

import { For, Stack, createListCollection } from '@chakra-ui/react'
import { Select } from '@saas-ui/react'

export const SelectWithSizes = () => {
  return (
    <Stack gap="5" width="320px">
      <For each={['xs', 'sm', 'md', 'lg']}>
        {(size) => (
          <Select.Root key={size} size={size} collection={frameworks}>
            <Select.Label>size = {size}</Select.Label>
            <Select.Trigger>
              <Select.ValueText placeholder="Select movie" />
            </Select.Trigger>
            <Select.Content>
              {frameworks.items.map((movie) => (
                <Select.Item item={movie} key={movie.value}>
                  {movie.label}
                </Select.Item>
              ))}
            </Select.Content>
          </Select.Root>
        )}
      </For>
    </Stack>
  )
}

const frameworks = createListCollection({
  items: [
    { label: 'React.js', value: 'react' },
    { label: 'Vue.js', value: 'vue' },
    { label: 'Angular', value: 'angular' },
    { label: 'Svelte', value: 'svelte' },
  ],
})

Variants

Use the variant prop to change the appearance of the select component.

Select framework - outline

Select framework - subtle

'use client'

import { For, Stack, createListCollection } from '@chakra-ui/react'
import { Select } from '@saas-ui/react'

export const SelectWithVariants = () => {
  return (
    <Stack gap="5" width="320px">
      <For each={['outline', 'subtle']}>
        {(variant) => (
          <Select.Root key={variant} variant={variant} collection={frameworks}>
            <Select.Label>Select framework - {variant}</Select.Label>
            <Select.Trigger>
              <Select.ValueText placeholder="Select movie" />
            </Select.Trigger>
            <Select.Content>
              {frameworks.items.map((movie) => (
                <Select.Item item={movie} key={movie.value}>
                  {movie.label}
                </Select.Item>
              ))}
            </Select.Content>
          </Select.Root>
        )}
      </For>
    </Stack>
  )
}

const frameworks = createListCollection({
  items: [
    { label: 'React.js', value: 'react' },
    { label: 'Vue.js', value: 'vue' },
    { label: 'Angular', value: 'angular' },
    { label: 'Svelte', value: 'svelte' },
  ],
})

Option Group

Use the SelectItemGroup component to group select options.

Select framework

'use client'

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

export const SelectWithOptionGroup = () => {
  return (
    <Select.Root collection={frameworks} size="sm" width="320px">
      <Select.Label>Select framework</Select.Label>
      <Select.Trigger>
        <Select.ValueText placeholder="Select movie" />
      </Select.Trigger>
      <Select.Content>
        {categories.map((category) => (
          <Select.ItemGroup key={category.group} label={category.group}>
            {category.items.map((item) => (
              <Select.Item item={item} key={item.value}>
                {item.label}
              </Select.Item>
            ))}
          </Select.ItemGroup>
        ))}
      </Select.Content>
    </Select.Root>
  )
}

const frameworks = createListCollection({
  items: [
    { label: 'Naruto', value: 'naruto', group: 'Anime' },
    { label: 'One Piece', value: 'one-piece', group: 'Anime' },
    { label: 'Dragon Ball', value: 'dragon-ball', group: 'Anime' },
    {
      label: 'The Shawshank Redemption',
      value: 'the-shawshank-redemption',
      group: 'Movies',
    },
    { label: 'The Godfather', value: 'the-godfather', group: 'Movies' },
    { label: 'The Dark Knight', value: 'the-dark-knight', group: 'Movies' },
  ],
})

const categories = frameworks.items.reduce(
  (acc, item) => {
    const group = acc.find((group) => group.group === item.group)
    if (group) {
      group.items.push(item)
    } else {
      acc.push({ group: item.group, items: [item] })
    }
    return acc
  },
  [] as { group: string; items: (typeof frameworks)['items'] }[],
)

Controlled

Use the value and onValueChange props to control the select component.

Select framework

'use client'

import { useState } from 'react'

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

export const SelectControlled = () => {
  const [value, setValue] = useState<string[]>([])
  return (
    <Select.Root
      collection={frameworks}
      width="320px"
      value={value}
      onValueChange={(e) => setValue(e.value)}
    >
      <Select.Label>Select framework</Select.Label>
      <Select.Trigger>
        <Select.ValueText placeholder="Select movie" />
      </Select.Trigger>
      <Select.Content>
        {frameworks.items.map((movie) => (
          <Select.Item item={movie} key={movie.value}>
            {movie.label}
          </Select.Item>
        ))}
      </Select.Content>
    </Select.Root>
  )
}

const frameworks = createListCollection({
  items: [
    { label: 'React.js', value: 'react' },
    { label: 'Vue.js', value: 'vue' },
    { label: 'Angular', value: 'angular' },
    { label: 'Svelte', value: 'svelte' },
  ],
})

Hook Form

Here's an example of how to use the Select component with react-hook-form.

'use client'

import { Button, Stack, createListCollection } from '@chakra-ui/react'
import { zodResolver } from '@hookform/resolvers/zod'
import { Field, Select } from '@saas-ui/react'
import { Controller, useForm } from 'react-hook-form'
import { z } from 'zod'

const formSchema = z.object({
  framework: z.string({ message: 'Framework is required' }).array(),
})

type FormValues = z.infer<typeof formSchema>

export const SelectWithHookForm = () => {
  const {
    handleSubmit,
    formState: { errors },
    control,
  } = useForm<FormValues>({
    resolver: zodResolver(formSchema),
  })

  const onSubmit = handleSubmit((data) => console.log(data))

  return (
    <form onSubmit={onSubmit}>
      <Stack gap="4" align="flex-start">
        <Controller
          control={control}
          name="framework"
          render={({ field }) => (
            <Field.Root invalid={!!errors.framework} width="320px">
              <Field.Label>Framework</Field.Label>
              <Select.Root
                name={field.name}
                value={field.value}
                onValueChange={({ value }) => field.onChange(value)}
                onInteractOutside={() => field.onBlur()}
                collection={frameworks}
              >
                <Select.Trigger>
                  <Select.ValueText placeholder="Select movie" />
                </Select.Trigger>
                <Select.Content>
                  {frameworks.items.map((movie) => (
                    <Select.Item item={movie} key={movie.value}>
                      {movie.label}
                    </Select.Item>
                  ))}
                </Select.Content>
              </Select.Root>
              <Field.ErrorText>{errors.framework?.message}</Field.ErrorText>
            </Field.Root>
          )}
        />

        <Button size="sm" type="submit">
          Submit
        </Button>
      </Stack>
    </form>
  )
}

const frameworks = createListCollection({
  items: [
    { label: 'React.js', value: 'react' },
    { label: 'Vue.js', value: 'vue' },
    { label: 'Angular', value: 'angular' },
    { label: 'Svelte', value: 'svelte' },
  ],
})

Disabled

Use the disabled prop to disable the select component.

Select framework

'use client'

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

export const SelectWithDisabled = () => {
  return (
    <Select.Root disabled collection={frameworks} size="sm" width="320px">
      <Select.Label>Select framework</Select.Label>
      <Select.Trigger>
        <Select.ValueText placeholder="Select movie" />
      </Select.Trigger>
      <Select.Content>
        {frameworks.items.map((movie) => (
          <Select.Item item={movie} key={movie.value}>
            {movie.label}
          </Select.Item>
        ))}
      </Select.Content>
    </Select.Root>
  )
}

const frameworks = createListCollection({
  items: [
    { label: 'React.js', value: 'react' },
    { label: 'Vue.js', value: 'vue' },
    { label: 'Angular', value: 'angular' },
    { label: 'Svelte', value: 'svelte' },
  ],
})

Invalid

Use the invalid prop to indicate that the select component has an error.

Select framework

This is an error

'use client'

import { createListCollection } from '@chakra-ui/react'
import { Field, Select } from '@saas-ui/react'

export const SelectWithInvalid = () => {
  return (
    <Field.Root invalid>
      <Select.Root collection={frameworks} size="sm" width="320px">
        <Select.Label>Select framework</Select.Label>
        <Select.Trigger>
          <Select.ValueText placeholder="Select movie" />
        </Select.Trigger>
        <Select.Content>
          {frameworks.items.map((movie) => (
            <Select.Item item={movie} key={movie.value}>
              {movie.label}
            </Select.Item>
          ))}
        </Select.Content>
      </Select.Root>
      <Field.ErrorText>This is an error</Field.ErrorText>
    </Field.Root>
  )
}

const frameworks = createListCollection({
  items: [
    { label: 'React.js', value: 'react' },
    { label: 'Vue.js', value: 'vue' },
    { label: 'Angular', value: 'angular' },
    { label: 'Svelte', value: 'svelte' },
  ],
})

Positioning

Use the positioning prop to control the underlying floating-ui options of the select component.

Select framework

'use client'

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

export const SelectWithPositioning = () => {
  return (
    <Select.Root
      collection={frameworks}
      size="sm"
      width="320px"
      positioning={{ placement: 'top', flip: false }}
    >
      <Select.Label>Select framework</Select.Label>
      <Select.Trigger>
        <Select.ValueText placeholder="Select movie" />
      </Select.Trigger>
      <Select.Content>
        {frameworks.items.map((movie) => (
          <Select.Item item={movie} key={movie.value}>
            {movie.label}
          </Select.Item>
        ))}
      </Select.Content>
    </Select.Root>
  )
}

const frameworks = createListCollection({
  items: [
    { label: 'React.js', value: 'react' },
    { label: 'Vue.js', value: 'vue' },
    { label: 'Angular', value: 'angular' },
    { label: 'Svelte', value: 'svelte' },
  ],
})

Use the Select within a Popover component.

'use client'

import { createListCollection } from '@chakra-ui/react'
import { Button, Popover, Select } from '@saas-ui/react'

export const SelectInPopover = () => {
  return (
    <Popover.Root size="xs">
      <Popover.Trigger asChild>
        <Button variant="outline" size="sm">
          Select in Popover
        </Button>
      </Popover.Trigger>

      <Popover.Content>
        <Popover.Header>Select in Popover</Popover.Header>
        <Popover.Body>
          <Select.Root
            collection={frameworks}
            size="sm"
            positioning={{ sameWidth: true, placement: 'bottom' }}
          >
            <Select.Trigger>
              <Select.ValueText placeholder="Select" />
            </Select.Trigger>
            <Select.Content portalled={false} width="full">
              {frameworks.items.map((item) => (
                <Select.Item item={item} key={item.value}>
                  {item.label}
                </Select.Item>
              ))}
            </Select.Content>
          </Select.Root>
        </Popover.Body>
      </Popover.Content>
    </Popover.Root>
  )
}

const frameworks = createListCollection({
  items: [
    { label: 'React.js', value: 'react' },
    { label: 'Vue.js', value: 'vue' },
    { label: 'Angular', value: 'angular' },
    { label: 'Svelte', value: 'svelte' },
  ],
})

Avatar Select

Here's an example of how to compose the Select and the Avatar.

Select member

'use client'

import { HStack, createListCollection } from '@chakra-ui/react'
import { Avatar, Select } from '@saas-ui/react'

const SelectValueItem = () => (
  <Select.ValueText placeholder="Select movie">
    {(items: Array<{ name: string; avatar: string }>) => {
      const { name, avatar } = items[0]
      return (
        <HStack>
          <Avatar name={name} size="xs" src={avatar} />
          {name}
        </HStack>
      )
    }}
  </Select.ValueText>
)

export const SelectWithAvatar = () => {
  return (
    <Select.Root
      collection={members}
      size="sm"
      width="240px"
      defaultValue={['jessica_jones']}
      positioning={{ sameWidth: true }}
    >
      <Select.Label>Select member</Select.Label>
      <Select.Trigger>
        <SelectValueItem />
      </Select.Trigger>
      <Select.Content portalled={false}>
        {members.items.map((item) => (
          <Select.Item item={item} key={item.id} justifyContent="flex-start">
            <Avatar name={item.name} src={item.avatar} size="xs" />
            {item.name}
          </Select.Item>
        ))}
      </Select.Content>
    </Select.Root>
  )
}

const members = createListCollection({
  items: [
    {
      name: 'Jessica Jones',
      id: 'jessica_jones',
      avatar:
        'https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=100',
    },
    {
      name: 'Kenneth Johnson',
      id: 'kenneth_johnson',
      avatar:
        'https://images.unsplash.com/photo-1523477800337-966dbabe060b?w=100',
    },
    {
      name: 'Kate Wilson',
      id: 'kate_wilson',
      avatar:
        'https://images.unsplash.com/photo-1609712409631-dbbb050746d1?w=100',
    },
  ],
  itemToString: (item) => item.name,
  itemToValue: (item) => item.id,
})

Clear Trigger

Pass the clearable prop to the SelectTrigger.

'use client'

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

export const SelectWithClear = () => {
  return (
    <Select.Root
      collection={animeMovies}
      defaultValue={['spirited_away']}
      size="sm"
      width="320px"
    >
      <Select.Label>Select fav. anime</Select.Label>
      <Select.Trigger clearable>
        <Select.ValueText placeholder="Select movie" />
      </Select.Trigger>
      <Select.Content>
        {animeMovies.items.map((movie) => (
          <Select.Item item={movie} key={movie.value}>
            {movie.label}
          </Select.Item>
        ))}
      </Select.Content>
    </Select.Root>
  )
}

const animeMovies = createListCollection({
  items: [
    { label: 'Spirited Away', value: 'spirited_away' },
    { label: 'My Neighbor Totoro', value: 'my_neighbor_totoro' },
    { label: 'Akira', value: 'akira' },
    { label: 'Princess Mononoke', value: 'princess_mononoke' },
    { label: 'Grave of the Fireflies', value: 'grave_of_the_fireflies' },
    { label: "Howl's Moving Castle", value: 'howls_moving_castle' },
    { label: 'Ghost in the Shell', value: 'ghost_in_the_shell' },
    { label: 'Naruto', value: 'naruto' },
    { label: 'Hunter x Hunter', value: 'hunter_x_hunter' },
    { label: 'The Wind Rises', value: 'the_wind_rises' },
    { label: "Kiki's Delivery Service", value: 'kikis_delivery_service' },
    { label: 'Perfect Blue', value: 'perfect_blue' },
    {
      label: 'The Girl Who Leapt Through Time',
      value: 'the_girl_who_leapt_through_time',
    },
    { label: 'Weathering with You', value: 'weathering_with_you' },
    { label: 'Ponyo', value: 'ponyo' },
    { label: '5 Centimeters per Second', value: '5_centimeters_per_second' },
    { label: 'A Silent Voice', value: 'a_silent_voice' },
    { label: 'Paprika', value: 'paprika' },
    { label: 'Wolf Children', value: 'wolf_children' },
    { label: 'Redline', value: 'redline' },
    {
      label: 'The Tale of the Princess Kaguya',
      value: 'the_tale_of_the_princess_kaguya',
    },
  ],
})

Overflow

'use client'

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

export const SelectWithOverflow = () => {
  return (
    <Select.Root collection={animeMovies} size="sm" width="240px">
      <Select.Label>Select anime</Select.Label>
      <Select.Trigger>
        <Select.ValueText placeholder="Select movie" />
      </Select.Trigger>
      <Select.Content>
        {animeMovies.items.map((movie) => (
          <Select.Item item={movie} key={movie.value}>
            {movie.label}
          </Select.Item>
        ))}
      </Select.Content>
    </Select.Root>
  )
}

const animeMovies = createListCollection({
  items: [
    { label: 'Spirited Away', value: 'spirited_away' },
    { label: 'My Neighbor Totoro', value: 'my_neighbor_totoro' },
    { label: 'Akira', value: 'akira' },
    { label: 'Princess Mononoke', value: 'princess_mononoke' },
    { label: 'Grave of the Fireflies', value: 'grave_of_the_fireflies' },
    { label: "Howl's Moving Castle", value: 'howls_moving_castle' },
    { label: 'Ghost in the Shell', value: 'ghost_in_the_shell' },
    { label: 'Naruto', value: 'naruto' },
    { label: 'Hunter x Hunter', value: 'hunter_x_hunter' },
    { label: 'The Wind Rises', value: 'the_wind_rises' },
    { label: "Kiki's Delivery Service", value: 'kikis_delivery_service' },
    { label: 'Perfect Blue', value: 'perfect_blue' },
    {
      label: 'The Girl Who Leapt Through Time',
      value: 'the_girl_who_leapt_through_time',
    },
    { label: 'Weathering with You', value: 'weathering_with_you' },
    { label: 'Ponyo', value: 'ponyo' },
    { label: '5 Centimeters per Second', value: '5_centimeters_per_second' },
    { label: 'A Silent Voice', value: 'a_silent_voice' },
    { label: 'Paprika', value: 'paprika' },
    { label: 'Wolf Children', value: 'wolf_children' },
    { label: 'Redline', value: 'redline' },
    {
      label: 'The Tale of the Princess Kaguya',
      value: 'the_tale_of_the_princess_kaguya',
    },
  ],
})

Props

Root

Prop	Default	Type
`collection` *		`ListCollection<T>` The collection of items
`closeOnSelect`	`true`	`boolean` Whether the select should close after an item is selected
`composite`	`true`	`boolean` Whether the select is a composed with other composite widgets like tabs or combobox
`lazyMount`	`false`	`boolean` Whether to enable lazy mounting
`loopFocus`	`false`	`boolean` Whether to loop the keyboard navigation through the options
`skipAnimationOnMount`	`false`	`boolean` Whether to allow the initial presence animation.
`unmountOnExit`	`false`	`boolean` Whether to unmount on exit.
`colorPalette`	`'gray'`	`'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'presence' \| 'status' \| 'sidebar' \| 'sidebar.accent' \| 'accent' \| 'slate'` The color palette of the component
`variant`	`'outline'`	`'outline' \| 'subtle'` The variant of the component
`size`	`'md'`	`'xs' \| 'sm' \| 'md' \| 'lg'` The size of the component
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`defaultHighlightedValue`		`string` The initial value of the highlighted item when opened. Use when you don't need to control the highlighted value of the select.
`defaultOpen`		`boolean` Whether the select's open state is controlled by the user
`defaultValue`		`string[]` The initial default value of the select when rendered. Use when you don't need to control the value of the select.
`deselectable`		`boolean` Whether the value can be cleared by clicking the selected item. Note: this is only applicable for single selection
`disabled`		`boolean` Whether the select is disabled
`form`		`string` The associate form of the underlying select.
`highlightedValue`		`string` The controlled key of the highlighted item
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ root: string content: string control: string trigger: string clearTrigger: string label: string hiddenSelect: string positioner: string item(id: string \| number): string itemGroup(id: string \| number): string itemGroupLabel(id: string \| number): string }>` The ids of the elements in the select. Useful for composition.
`immediate`		`boolean` Whether to synchronize the present change immediately or defer it to the next frame
`invalid`		`boolean` Whether the select is invalid
`multiple`		`boolean` Whether to allow multiple selection
`name`		`string` The `name` attribute of the underlying select.
`onExitComplete`		`VoidFunction` Function called when the animation ends in the closed state
`onFocusOutside`		`(event: FocusOutsideEvent) => void` Function called when the focus is moved outside the component
`onHighlightChange`		`(details: HighlightChangeDetails<T>) => void` The callback fired when the highlighted item changes.
`onInteractOutside`		`(event: InteractOutsideEvent) => void` Function called when an interaction happens outside the component
`onOpenChange`		`(details: OpenChangeDetails) => void` Function called when the popup is opened
`onPointerDownOutside`		`(event: PointerDownOutsideEvent) => void` Function called when the pointer is pressed down outside the component
`onValueChange`		`(details: ValueChangeDetails<T>) => void` The callback fired when the selected item changes.
`open`		`boolean` Whether the select menu is open
`positioning`		`PositioningOptions` The positioning options of the menu.
`present`		`boolean` Whether the node is present (controlled by the user)
`readOnly`		`boolean` Whether the select is read-only
`required`		`boolean` Whether the select is required
`scrollToIndexFn`		`(details: ScrollToIndexDetails) => void` Function to scroll to a specific index
`value`		`string[]` The controlled keys of the selected items
`as`		`React.ElementType` The underlying element to render.
`unstyled`		`boolean` Whether to remove the component's style.

Select (Native)

Separator

Getting started

Overview

Frameworks

Components

Concepts

Layout

Typography

Components

Utilities

Forms

Styling

Concepts

Compositions

Style props

Theming

Concepts

Compositions

Design tokens

Customization

Select

Anatomy

Examples

Sizes

Variants

Option Group

Controlled

Hook Form

Disabled

Invalid

Positioning

Within Popover

Avatar Select

Clear Trigger

Overflow

Props

Root

Getting started

Overview

Frameworks

Components

Concepts

Layout

Typography

Components

Utilities

Forms

Styling

Concepts

Compositions

Style props

Theming

Concepts

Compositions

Design tokens

Customization

Select

.css-1xm0752{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:var(--chakra-font-weights-medium);}Anatomy

Anatomy