Select

선택 드롭다운 컴포넌트는 여러 옵션 중 하나를 선택하는 폼 요소입니다.

기본 사용법

import {
  SelectRoot,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from '@aift/ui/Select';

<SelectRoot defaultValue="option1">
  <SelectTrigger>
    <SelectValue placeholder="선택하세요" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1">Option 1</SelectItem>
    <SelectItem value="option2">Option 2</SelectItem>
  </SelectContent>
</SelectRoot>;

import {
  SelectRoot,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from '@aift/ui/Select';

export default function Preview() {
  return (
    <div className="max-w-md">
      <SelectRoot defaultValue="option1">
        <SelectTrigger>
          <SelectValue placeholder="선택하세요" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="option1">Option 1</SelectItem>
          <SelectItem value="option2">Option 2</SelectItem>
        </SelectContent>
      </SelectRoot>
    </div>
  );
}

import {  SelectRoot,  SelectTrigger,  SelectValue,  SelectContent,  SelectItem,} from '@aift/ui/Select';export default function Preview() {  return (    <div className="max-w-md">      <SelectRoot defaultValue="option1">        <SelectTrigger>          <SelectValue placeholder="선택하세요" />        </SelectTrigger>        <SelectContent>          <SelectItem value="option1">Option 1</SelectItem>          <SelectItem value="option2">Option 2</SelectItem>        </SelectContent>      </SelectRoot>    </div>  );}

Props

Select 컴포넌트는 Radix UI의 Select를 기반으로 하며, 여러 하위 컴포넌트로 구성됩니다.

Select.Root: 루트 컴포넌트
Select.Trigger: 트리거 버튼
Select.Value: 선택된 값 표시
Select.Content: 드롭다운 콘텐츠
Select.Item: 선택 항목
Select.Group: 항목 그룹
Select.Label: 그룹 레이블
Select.Separator: 구분선

Select

Select

기본 사용법

Props

On this page