Edgecom Design System

Select

Choose one or more options from a dropdown list.

A single-value select styled to match the design system.

A styled select with options organized into groups.

A select showing a placeholder until a value is chosen.

A custom select with labelled option groups.

Site

A multi-select that accepts several values at once.

Multiselect with placeholder and clear

Select commodities

A multi-select pre-populated with selected values and inline tags.

Multiselect

Select categories

Clothing

Footwear

Choose one value from a list. A Root holds the value and wraps a Trigger plus a portalled, positioned Content of Items.

Anatomy

`Select`	Root. Owns the value state and wraps the trigger and content.
`SelectContent`	The popup listbox — portalled, positioned below the trigger.
`SelectGroup`	Wraps related items. Required around a SelectLabel.
`SelectItem`	A selectable option; shows a check when selected.
`SelectLabel`	A non-interactive heading for a group. Must be inside SelectGroup.
`SelectScrollDownButton`	Scroll-down affordance shown when the list overflows.
`SelectScrollUpButton`	Scroll-up affordance shown when the list overflows.
`SelectSeparator`	A thin divider between groups or items.
`SelectTrigger`	The button that opens the listbox and shows the current value.
`SelectValue`	Renders the selected item's label, or the placeholder when empty.

Props

Part	Prop	Type	Default	Description
`SelectTrigger`	`size`	`"sm" \| "default"`	`"default"`	Control height — sm (h-7) or default (h-8).
`SelectContent`	`side`	`"top" \| "bottom" \| "left" \| "right"`	`"bottom"`	Which side of the trigger the popup opens on.
`SelectContent`	`align`	`"start" \| "center" \| "end"`	`"start"`	Alignment of the popup relative to the trigger.
`SelectContent`	`sideOffset`	`number`	`4`	Gap in pixels between the trigger and the popup.
`SelectContent`	`alignItemWithTrigger`	`boolean`	`false`	macOS-style overlay of the selected item onto the trigger. Off, for standard dropdown positioning.