Select

import {
  Select,
  Option,
  OptionGroup,
  OptionGroupLabel,
  createSelectCollection
} from '@cerberus/react'

Usage

The Select component is a controlled component that can be used to select one option from a set. It can be used in a group with other selects to allow for multiple selections.

Grouped Options

To group options, use the OptionGroup and OptionGroupLabel components.

With Dialog

To use the Select component with a dialog, you can use the container prop to render the dropdown in the dialog dom-tree.

Primitives

You can utilize the primitive components or the css prop to customize the select.

API

Select

The Select component is an abstraction of our primitives and accepts the following props:

The Select component also accepts all the props of the SelectRoot primitive props

Option

The Option component is an abstraction of our primitives and accepts the following props:

The Option component also accepts all the props of the SelectItem primitive props

OptionGroup

The OptionGroup component is an abstraction of our primitives and accepts the same props as the SelectItemGroup primitive.

OptionGroupLabel

The OptionGroupLabel component is an abstraction of our primitives and accepts the same props as the SelectItemGroupLabel primitive.

createSelectCollection

The createSelectCollection function is a utility function that creates a collection of options for the Select component.

export function createSelectCollection(
  collection: SelectCollectionItem[],
): ListCollection<SelectCollectionItem> {
  return createListCollection({
    items: collection,
  })
}

Parts

The SelectParts API is an Object containing the full family of components.