Inputs

Select

키보드 친화 단일 선택 드롭다운.

항목이 많거나 그룹화가 필요한 경우. Compound: Trigger / Content / Group / Label / Item / Separator. Radix Select 기반 — 키보드, 포커스 트랩, 가상 포커스 모두 표준.

import { Select } from "@nxtgen-org/react";

Basic

Single group

tsx

1<Select defaultValue="ko">
2  <Select.Trigger className="w-full">
3    <Select.Value />
4  </Select.Trigger>
5  <Select.Content>
6    <Select.Group>
7      <Select.Item value="ko">한국어</Select.Item>
8      <Select.Item value="en">English</Select.Item>
9      <Select.Item value="ja">日本語</Select.Item>
10    </Select.Group>

With groups & labels

Multiple groups + separator

tsx

1<Select defaultValue="opus">
2  <Select.Trigger>
3    <Select.Value />
4  </Select.Trigger>
5  <Select.Content>
6    <Select.Group>
7      <Select.Label>Anthropic</Select.Label>
8      <Select.Item value="opus">Opus 4.7</Select.Item>
9      <Select.Item value="sonnet">Sonnet 4.6</Select.Item>
10    </Select.Group>

API

Name	Type	Default	Description
Select	Radix Select Root	—	value/defaultValue/onValueChange.
Trigger	props + size?: 'sm'\|'md'\|'lg'	—	—
Content	Radix Content + 자체 styling	—	—
Item	value: string + children	—	—
Group / Label / Separator	—	—	Label은 Group 내부 필수.