Wedges

Usage

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectIcon,
  SelectItem,
  SelectPortal,
  SelectTrigger,
  SelectValue,
} from "@lemonsqueezy/wedges";

<Select>
  <SelectTrigger />
    <SelectContent>
      <SelectGroup>
        <SelectItem value="item-1">Item 1</SelectItem>
        <SelectItem value="item-2">Item 2</SelectItem>
        <SelectItem value="item-3">Item 3</SelectItem>
      </SelectGroup>
    </SelectContent>
</Select>

You can use SelectPortal to render the content in a different location in the DOM. See API Reference for details.

<Select>
  <SelectTrigger />
  <SelectPortal>
      <SelectContent>
        <SelectGroup>
          <SelectItem value="item-1">Item 1</SelectItem>
          <SelectItem value="item-2">Item 2</SelectItem>
          <SelectItem value="item-3">Item 3</SelectItem>
        </SelectGroup>
      </SelectContent>
    </SelectPortal>
</Select>

API Reference

Select

Contains all the parts of a select. A styled wrapper around Radix Select.Root primitive with additional features.

SelectTrigger

The button that toggles the select. The SelectContent component is rendered when the trigger is clicked.

SelectValue

The part that reflects the selected value. By default the selected item’s text will be rendered. if you require more control, you can instead control the select and pass your own children. It should not be styled to ensure correct positioning. An optional placeholder prop is also available for when the select has no value.

SelectIcon

A small icon often displayed next to the value as a visual affordance for the fact it can be open. By default renders a chevron icon pointed down or up depending on the open state, but you can use your own icon via asChild or use children.

SelectPortal

When used, portals the content part into the body. By default it appends content to the body, but you can specify a custom container.

SelectContent

The component that pops out when the select is open. A styled wrapper around Radix Select.Content primitive with additional features.

SelectItem

The component that contains the select items.

By default SelectItemText and SelectItemIndicator are rendered inside the SelectItem component. You can use your own components if you need to customize it via children.

SelectItemText

The textual part of the item. It should only contain the text you want to see in the trigger when that item is selected. It should not be styled to ensure correct positioning.

SelectItemIndicator

Renders when the item is selected. You can style this element directly, or you can use it as a wrapper to put an icon into, or both. By default it renders a checkmark icon.

SelectGroup

SelectLabel

Used to render the label of a group. It won’t be focusable using arrow keys.

SelectSeparator

Used to visually separate items in the select.

Accessibility

The Select component supports all accessibility features of the Radix Select primitive.

Examples

The following example shows how to add icons to the SelectItem and style them with Tailwind CSS. Icons are added using a custom DotIcon component, which is placed inside each SelectItem alongside the text. Tailwind classes like flex and gap-1 are used to align and space the icons and text properly.

Each icon is styled with custom colors to represent different statuses.

Next example demonstrates how to structure your items, with groups separators, and labels. The SelectContent component in this example uses a different content position - item-aligned.