SELECT

Dropdown selector built on Radix UI. Portaled content with green highlighted item indicator. Supports groups, labels, and separators.

DEPS:@radix-ui/react-select

PREVIEW

INSTALLATION

BASH

npx shadcn@latest add @scificn/select

USAGE

TSX

import {
  Select, SelectTrigger, SelectValue,
  SelectContent, SelectItem, SelectLabel, SelectGroup,
} from '@/ui/select'

export function SectorSelect() {
  return (
    <Select onValueChange={(v) => console.log(v)}>
      <SelectTrigger style={{ width: '240px' }}>
        <SelectValue placeholder="SELECT SECTOR..." />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectLabel>INNER SYSTEMS</SelectLabel>
          <SelectItem value="alpha">ALPHA-7</SelectItem>
          <SelectItem value="beta">BETA-3</SelectItem>
        </SelectGroup>
        <SelectSeparator />
        <SelectGroup>
          <SelectLabel>OUTER RIM</SelectLabel>
          <SelectItem value="gamma">GAMMA-9</SelectItem>
          <SelectItem value="delta">DELTA-2</SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  )
}

ANATOMY

SelectRoot — manages open/value state.

SelectTriggerButton that opens the dropdown. Shows selected value or placeholder.

SelectValueDisplays the current selected value. Renders placeholder when empty.

SelectContentPortaled dropdown list. Positions relative to trigger width.

SelectGroupGroups related items together. Pair with SelectLabel.

SelectLabelNon-interactive group heading. Uppercase, muted, small.

SelectItemSelectable option. Highlights green on hover. Shows ■ when selected.

SelectSeparatorHorizontal rule between groups.

PROPS

PROP	TYPE	DEFAULT	DESCRIPTION
value	string	—	Controlled value.
defaultValue	string	—	Initial value (uncontrolled).
onValueChange	(value: string) => void	—	Callback when selection changes.
disabled	boolean	false	Disables the trigger.
placeholder	string (on SelectValue)	—	Text shown when no value is selected.