styple

Select

Enable user selection of a list of options.

Example

import { Select, SelectItem, SelectGroup, SelectLabel, SelectSeparator } from "@styple/design-system";

<Flex
  css={{
    gap: "$md",
    alignItems: "center",
  }}
>
  <Select defaultValue="1">
    <SelectGroup>
      <SelectLabel>First</SelectLabel>
      <SelectItem value="1">Select 1</SelectItem>
      <SelectItem value="2">Select 2</SelectItem>
      <SelectItem value="3">Select 3</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectGroup>
      <SelectLabel>Second</SelectLabel>
      <SelectItem value="4">Select 4</SelectItem>
      <SelectItem value="5">Select 5</SelectItem>
      <SelectItem value="6">Select 6</SelectItem>
    </SelectGroup>
  </Select>
  <Select defaultValue="1" size="md">
    <SelectItem value="1">Select 1</SelectItem>
    <SelectItem value="2">Select 2</SelectItem>
    <SelectItem value="3">Select 3</SelectItem>
  </Select>
</Flex>

API Reference

See Radix-UI Select (v0.1.1) for details. This only covers styple abstractions.

Select

A styled abstraction combining Select.Root, Select.Trigger, Select.Value, Select.Icon, Select.Content, Select.ScrollDownButton, Select.ScrollUpButton and Select.Viewport. Takes the props of Select.Root and a variant from the styled trigger:

Prop	Type	Default	Explanation
`size`	`"sm" \| "md"`	`"sm"`	Size variant.

SelectItem

A styled abstraction combining Select.Item, Select.ItemText and Select.ItemIndicator.

SelectGroup

A styled component wrapper for Select.Group.

SelectLabel

A styled component wrapper for Select.Label.

SelectSeparator

A styled component wrapper for Select.Separator.

Section

Separator