Select

Installation#

npmpnpmyarnbun

npx sugarcoat add select

Examples#

Default#

Default

Sizes#

Available in four sizes to fit different UI contexts.

Sizes

With Placeholder#

Placeholder

Shadow#

Add elevation with the shadow prop.

Shadow

With Groups#

Organize options into logical groups.

Grouped Options

Disabled State#

Disabled

Controlled Select#

Controlled

Form Example#

Form Example

Anatomy#

<Select>
  <Select.Trigger>
    <Select.Value placeholder="Select..." />
    <Select.Icon />
  </Select.Trigger>
  <Select.Portal>
    <Select.Positioner>
      <Select.Popup>
        <Select.Group>
          <Select.GroupLabel>Group</Select.GroupLabel>
          <Select.Item value="option">
            <Select.ItemIndicator />
            <Select.ItemText>Option</Select.ItemText>
          </Select.Item>
        </Select.Group>
        <Select.Separator />
      </Select.Popup>
    </Select.Positioner>
  </Select.Portal>
</Select>

Usage#

Import

import { Select } from "@sugarcoat/ui-nxt";

Usage

<Select defaultValue="option1">
<Select.Trigger>
  <Select.Value placeholder="Select an option" />
  <Select.Icon />
</Select.Trigger>
<Select.Portal>
  <Select.Positioner>
    <Select.Popup>
      <Select.Item value="option1">
        <Select.ItemText>Option 1</Select.ItemText>
      </Select.Item>
      <Select.Item value="option2">
        <Select.ItemText>Option 2</Select.ItemText>
      </Select.Item>
    </Select.Popup>
  </Select.Positioner>
</Select.Portal>
</Select>

Props#

Select (Root)#

Prop	Type	Default	Description
size	"xs" \| "sm" \| "md" \| "lg"	"md"	Size of the select trigger and options
color	"default"	"default"	Color palette for the select
shadow	"none" \| "sm" \| "md" \| "lg" \| "inset"	"sm"	Box shadow elevation
block	boolean	true	Whether the select spans full width
animation	boolean	true	Enable transition animations
value	string	-	Controlled selected value
defaultValue	string	-	Initial selected value (uncontrolled)
onValueChange	(value: string) => void	-	Callback when selection changes
disabled	boolean	false	Whether the select is disabled

Select.Value#

Prop	Type	Default	Description
placeholder	string	-	Text displayed when no value is selected

Select.Item#

Prop	Type	Default	Description
valuerequired	string	-	Unique value for this option
disabled	boolean	-	Whether this item is disabled

Accessibility#

Built on Base UI Select for robust accessibility
Supports keyboard navigation (Arrow keys, Enter, Escape)
Properly announces selected value and available options
Focus management between trigger and popup
ARIA attributes for listbox pattern