Select

Single select combobox widget to allow selection from a fixed set of options.

#
Documentation

#
Usage

import { Box } from "@optiaxiom/react";
import {
  Select,
  SelectContent,
  SelectRadioItem,
  SelectTrigger,
  SelectValue,
} from "@optiaxiom/react/unstable";
 
import { colors } from "./data";
 
export function App() {
  return (
    <Select
      isItemDisabled={(item) => Boolean(item.isDisabled)}
      items={colors}
      itemToString={(item) => (item ? item.label : "")}
    >
      <SelectTrigger>
        <SelectValue placeholder="Select a color..." />
      </SelectTrigger>
 
      <SelectContent>
        {colors.map((color) => (
          <SelectRadioItem
            icon={
              <Box
                rounded="sm"
                style={{ aspectRatio: 1, backgroundColor: color.color }}
              />
            }
            item={color}
            key={color.value}
          >
            {color.label}
          </SelectRadioItem>
        ))}
      </SelectContent>
    </Select>
  );
}

#
Anatomy

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectRadioItem,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
} from "@optiaxiom/react";
 
export default () => (
  <Select>
    <SelectTrigger>
      <SelectValue />
    </SelectTrigger>
 
    <SelectContent>
      <SelectItem />
      <SelectRadioItem />
 
      <SelectGroup>
        <SelectLabel />
        <SelectItem />
        <SelectRadioItem />
      </SelectGroup>
 
      <SelectSeparator />
    </SelectContent>
  </Select>
);

#
Related

Autocomplete

Text field with inline autocomplete to show suggestions while allowing freeform user input.

Combobox

Multi-purpose combobox widget to allow selection from a dynamic set of options.

DropdownMenu

Display a dropdown menu.

#
Props

#
Select

Doesn't render its own HTML element.

Prop
defaultOpen false \| true Default: false
defaultValue Item
disabled false \| true
isItemDisabled (item: Item, index: number) => boolean
items* Item[]
itemToKey (item: Item) => any Default: (value) => value
itemToString (item: Item) => string Default: (value) => (value ? String(value) : "")
onOpenChange (open: boolean) => void
onValueChange (value: Item) => void
open false \| true
value Item

#
SelectTrigger

Supports all Button props in addition to its own. Renders a <button> element.

Prop
addonAfter Display content inside the button after `children`. ReactNode
addonBefore Display content inside the button before `children`. ReactNode
appearance Control the appearance by selecting between the different button types. "default" \| "danger" \| "primary" \| "subtle" \| "danger-outline" \| "inverse"
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. false \| true
className string
disabled Whether the button is disabled. false \| true
icon Display an icon before or after the button content or omit `children` to only show the icon. ReactNode
iconOnly Whether button should have square shape. false \| true
iconPosition Control whether to show the icon before or after the button content. "end" \| "start"
loading Whether to show loading spinner inside the button. false \| true
size Control the size of the button. "sm" \| "md" \| "lg"
virtualRef RefObject<Measurable>

#
SelectValue

Supports all Box props in addition to its own. Renders a <div> element.

Prop
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. false \| true
className string
placeholder string

#
SelectContent

Supports all Box props in addition to its own. Renders a <div> element.

Prop
align "center" \| "end" \| "start" Default: start
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. false \| true
className string
loading Whether to show loading spinner inside the menu. false \| true
maxH Whether to restrict the max-height of the content. Content is also restricted by the available height in the screen relative to the trigger. "xs" \| "sm" \| "md" \| "lg" \| "full"
minW Whether to set the min-width to the width of the trigger. "0" \| "trigger"
side "bottom" \| "left" \| "right" \| "top" Default: bottom

#
SelectItem

Supports all Box props in addition to its own. Renders a <div> element.

Prop
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. false \| true
className string
item* unknown

#
SelectRadioItem

Supports all Box props in addition to its own. Renders a <div> element.

Prop
addonAfter Display content inside the item after `children`. ReactNode
addonBefore Display content inside the item before `children`. ReactNode
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. false \| true
className string
description Add secondary text after the primary label. ReactNode
icon Display an icon before the item content. ReactNode
intent Control the appearance by selecting between the different item types. "danger" \| "neutral"
item* unknown

#
SelectGroup

Supports all Box props in addition to its own. Renders a <div> element.

Prop
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. false \| true
className string

#
SelectLabel

Supports all Box props in addition to its own. Renders a <div> element.

Prop
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. false \| true
className string

#
SelectSeparator

Supports all Separator props in addition to its own. Renders a <div> element.

Prop
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. false \| true
className string
decorative Whether or not the component is purely decorative. When true, accessibility-related attributes are updated so that that the rendered element is removed from the accessibility tree. false \| true
orientation ResponsiveValue<"horizontal" \| "vertical">

#
Changelog

#
0.2.0

Added component

SegmentedControl