Select

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

App.tsx


"use client";
 
import {
  Select,
  SelectContent,
  SelectTrigger,
} from "@optiaxiom/react/unstable";
 
import { colors } from "./data";
 
export function App() {
  return (
    <Select items={colors}>
      <SelectTrigger placeholder="Select a color..." w="224" />
      <SelectContent />
    </Select>
  );
}

#
Guide

#
Structure

Select works with lists of items provided via the items prop. The basic structure includes the main component provider, a trigger, and a content.

Select
SelectTrigger
SelectContent

Items can be an array of strings or it can be an array of objects.

The trigger can be provided a placeholder to display in case no values have been selected yet.


"use client";
 
import {
  Select,
  SelectContent,
  SelectTrigger,
} from "@optiaxiom/react/unstable";
 
const colors = ["Blue", "Purple", "Red", "Orange", "Yellow"];
 
export function App() {
  return (
    <Select items={colors}>
      <SelectTrigger placeholder="Select a color..." />
      <SelectContent />
    </Select>
  );
}

#
Content

By default content popover will be populated using the items prop but we can provide our own children to customize how items are rendered.


"use client";
 
import { Box } from "@optiaxiom/react";
import {
  Select,
  SelectContent,
  SelectRadioItem,
  SelectTrigger,
} from "@optiaxiom/react/unstable";
 
const colors = ["Blue", "Purple", "Red", "Orange", "Yellow"];
 
export function App() {
  return (
    <Select items={colors}>
      <SelectTrigger placeholder="Select a color..." />
      <SelectContent>
        {colors.map((color) => (
          <SelectRadioItem
            icon={
              <Box
                rounded="sm"
                style={{ aspectRatio: 1, backgroundColor: color }}
              />
            }
            item={color}
            key={color}
          >
            {color}
          </SelectRadioItem>
        ))}
      </SelectContent>
    </Select>
  );
}

#
Documentation

#
Anatomy


import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectRadioItem,
  SelectSeparator,
  SelectTrigger,
} from "@optiaxiom/react";
 
export default () => (
  <Select>
    <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`
`defaultValue` `string`
`disabled` `false \| true`
`isItemDisabled` `(item: NoInfer<Item>, index: number) => boolean`
`items*` `Item[]`
`itemToLabel` `(item: NoInfer<Item>) => string`
`itemToValue` `(item: NoInfer<Item>) => NoInfer<Item> \| (item: NoInfer<Item>) => string`
`onOpenChange` `(open: boolean) => void`
`onValueChange` `(value: NoInfer<Item>) => void \| (value: string) => void`
`open` `false \| true`
`value` `string`