Select

Overview

A compound component built on Radix UI's Select primitive. Supports two trigger sizes, item grouping, and scroll buttons for long lists. Exports both compound (Select.Trigger) and individual named exports.

Usage

import { Select } from "@leanicon/web-builder-library";

<Select>
  <Select.Trigger className="w-48">
    <Select.Value placeholder="Choose a fruit" />
  </Select.Trigger>
  <Select.Content>
    <Select.Group>
      <Select.Label>Fruits</Select.Label>
      <Select.Item value="apple">Apple</Select.Item>
      <Select.Item value="banana">Banana</Select.Item>
    </Select.Group>
    <Select.Separator />
    <Select.Item value="other">Other</Select.Item>
  </Select.Content>
</Select>;

With groups

Simple

With default value

Small trigger

Disabled

Notes

• Controlled: pass value and onValueChange to the root Select.
• Select.Trigger width defaults to w-fit; set an explicit width for full-width dropdowns.
• Select.Trigger supports size="sm" for compact layouts.
• Dark mode is handled via semantic tokens.