Select

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

#
Documentation

#
Usage

App.tsx


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

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`
`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"`
`square` Whether button should have square shape. `false \| true`
`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

Last updated on February 4, 2025

SegmentedControl Sidebar