Components
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 Select from '@aift/ui/Select';export default function Preview() { return ( <div className="space-y-6 max-w-md"> <section> <Select.Root defaultValue="option1"> <Select.Trigger> <Select.Value placeholder="선택하세요" /> </Select.Trigger> <Select.Content> <Select.Item value="option1">Option 1</Select.Item> <Select.Item value="option2">Option 2</Select.Item> <Select.Item value="option3">Option 3</Select.Item> </Select.Content> </Select.Root> </section> </div> );}Size
Select의 크기를 설정할 수 있습니다.
'use client';import { SelectRoot, SelectTrigger, SelectValue, SelectContent, SelectItem,} from '@aift/ui/Select';export default function Sizes() { return ( <div className="space-y-4 max-w-md"> <SelectRoot defaultValue="option1"> <SelectTrigger size="xsmall"> <SelectValue placeholder="xsmall 크기" /> </SelectTrigger> <SelectContent> <SelectItem value="option1" size="xsmall"> Option 1 </SelectItem> <SelectItem value="option2" size="xsmall"> Option 2 </SelectItem> <SelectItem value="option3" size="xsmall"> Option 3 </SelectItem> </SelectContent> </SelectRoot> <SelectRoot defaultValue="option1"> <SelectTrigger size="small"> <SelectValue placeholder="small 크기" /> </SelectTrigger> <SelectContent> <SelectItem value="option1" size="small"> Option 1 </SelectItem> <SelectItem value="option2" size="small"> Option 2 </SelectItem> <SelectItem value="option3" size="small"> Option 3 </SelectItem> </SelectContent> </SelectRoot> <SelectRoot defaultValue="option1"> <SelectTrigger size="medium"> <SelectValue placeholder="medium 크기" /> </SelectTrigger> <SelectContent> <SelectItem value="option1" size="medium"> Option 1 </SelectItem> <SelectItem value="option2" size="medium"> Option 2 </SelectItem> <SelectItem value="option3" size="medium"> Option 3 </SelectItem> </SelectContent> </SelectRoot> <SelectRoot defaultValue="option1"> <SelectTrigger size="large"> <SelectValue placeholder="large 크기" /> </SelectTrigger> <SelectContent> <SelectItem value="option1" size="large"> Option 1 </SelectItem> <SelectItem value="option2" size="large"> Option 2 </SelectItem> <SelectItem value="option3" size="large"> Option 3 </SelectItem> </SelectContent> </SelectRoot> <SelectRoot defaultValue="option1"> <SelectTrigger size="xlarge"> <SelectValue placeholder="xlarge 크기" /> </SelectTrigger> <SelectContent> <SelectItem value="option1" size="xlarge"> Option 1 </SelectItem> <SelectItem value="option2" size="xlarge"> Option 2 </SelectItem> <SelectItem value="option3" size="xlarge"> Option 3 </SelectItem> </SelectContent> </SelectRoot> </div> );}Placeholder
Select에 placeholder를 설정할 수 있습니다.
'use client';import { SelectRoot, SelectTrigger, SelectValue, SelectContent, SelectItem,} from '@aift/ui/Select';export default function Placeholder() { return ( <div className="space-y-4 max-w-md"> <SelectRoot> <SelectTrigger> <SelectValue placeholder="선택하세요" /> </SelectTrigger> <SelectContent> <SelectItem value="option1">Option 1</SelectItem> <SelectItem value="option2">Option 2</SelectItem> <SelectItem value="option3">Option 3</SelectItem> </SelectContent> </SelectRoot> <SelectRoot> <SelectTrigger> <SelectValue placeholder="옵션을 선택해주세요" /> </SelectTrigger> <SelectContent> <SelectItem value="option1">Option 1</SelectItem> <SelectItem value="option2">Option 2</SelectItem> <SelectItem value="option3">Option 3</SelectItem> </SelectContent> </SelectRoot> <SelectRoot defaultValue="option1"> <SelectTrigger> <SelectValue placeholder="선택하세요" /> </SelectTrigger> <SelectContent> <SelectItem value="option1">Option 1</SelectItem> <SelectItem value="option2">Option 2</SelectItem> <SelectItem value="option3">Option 3</SelectItem> </SelectContent> </SelectRoot> </div> );}Label
Select에 레이블을 추가할 수 있습니다.
'use client';import { SelectRoot, SelectTrigger, SelectValue, SelectContent, SelectItem,} from '@aift/ui/Select';import { FormField, FormLabel } from '@aift/ui/Form';export default function Label() { return ( <div className="space-y-4 max-w-md"> <FormField> <FormLabel>선택 항목</FormLabel> <SelectRoot defaultValue="option1"> <SelectTrigger> <SelectValue placeholder="선택하세요" /> </SelectTrigger> <SelectContent> <SelectItem value="option1">Option 1</SelectItem> <SelectItem value="option2">Option 2</SelectItem> <SelectItem value="option3">Option 3</SelectItem> </SelectContent> </SelectRoot> </FormField> <SelectRoot defaultValue="option1"> <SelectTrigger> <SelectValue placeholder="레이블 없이 표시되는 선택 필드" /> </SelectTrigger> <SelectContent> <SelectItem value="option1">Option 1</SelectItem> <SelectItem value="option2">Option 2</SelectItem> <SelectItem value="option3">Option 3</SelectItem> </SelectContent> </SelectRoot> </div> );}Message
Select의 상태에 따라 메시지를 표시할 수 있습니다.
주의 메시지가 표시됩니다
에러 메시지가 표시됩니다
'use client';import { SelectRoot, SelectTrigger, SelectValue, SelectContent, SelectItem,} from '@aift/ui/Select';import { FormField, FormLabel, FormMessage } from '@aift/ui/Form';export default function Message() { return ( <div className="space-y-4 max-w-md"> <FormField status="cautionary" className="gap-2"> <FormLabel>주의 상태</FormLabel> <SelectRoot defaultValue="option1"> <SelectTrigger status="cautionary"> <SelectValue placeholder="선택하세요" /> </SelectTrigger> <SelectContent> <SelectItem value="option1">Option 1</SelectItem> <SelectItem value="option2">Option 2</SelectItem> <SelectItem value="option3">Option 3</SelectItem> </SelectContent> </SelectRoot> <FormMessage status="cautionary">주의 메시지가 표시됩니다</FormMessage> </FormField> <FormField status="destructive" className="gap-2"> <FormLabel>에러 상태</FormLabel> <SelectRoot defaultValue="option1"> <SelectTrigger status="destructive"> <SelectValue placeholder="선택하세요" /> </SelectTrigger> <SelectContent> <SelectItem value="option1">Option 1</SelectItem> <SelectItem value="option2">Option 2</SelectItem> <SelectItem value="option3">Option 3</SelectItem> </SelectContent> </SelectRoot> <FormMessage status="destructive">에러 메시지가 표시됩니다</FormMessage> </FormField> </div> );}Disabled
Select를 비활성화할 수 있습니다.
'use client';import { SelectRoot, SelectTrigger, SelectValue, SelectContent, SelectItem,} from '@aift/ui/Select';export default function Disabled() { return ( <div className="space-y-4 max-w-md"> <SelectRoot defaultValue="option1"> <SelectTrigger> <SelectValue placeholder="선택 가능한 필드" /> </SelectTrigger> <SelectContent> <SelectItem value="option1">Option 1</SelectItem> <SelectItem value="option2">Option 2</SelectItem> <SelectItem value="option3">Option 3</SelectItem> </SelectContent> </SelectRoot> <SelectRoot defaultValue="option1" disabled> <SelectTrigger disabled> <SelectValue placeholder="선택 불가능한 필드" /> </SelectTrigger> <SelectContent> <SelectItem value="option1">Option 1</SelectItem> <SelectItem value="option2">Option 2</SelectItem> <SelectItem value="option3">Option 3</SelectItem> </SelectContent> </SelectRoot> <SelectRoot defaultValue="option2" disabled> <SelectTrigger disabled> <SelectValue placeholder="비활성화된 선택 값" /> </SelectTrigger> <SelectContent> <SelectItem value="option1">Option 1</SelectItem> <SelectItem value="option2">Option 2</SelectItem> <SelectItem value="option3">Option 3</SelectItem> </SelectContent> </SelectRoot> </div> );}Color
Select의 배경색을 설정할 수 있습니다.
'use client';import { SelectRoot, SelectTrigger, SelectValue, SelectContent, SelectItem,} from '@aift/ui/Select';export default function Color() { return ( <div className="space-y-4 max-w-md"> <SelectRoot defaultValue="option1"> <SelectTrigger color="white"> <SelectValue placeholder="흰색 배경 선택 필드" /> </SelectTrigger> <SelectContent> <SelectItem value="option1">Option 1</SelectItem> <SelectItem value="option2">Option 2</SelectItem> <SelectItem value="option3">Option 3</SelectItem> </SelectContent> </SelectRoot> <SelectRoot defaultValue="option1"> <SelectTrigger color="gray"> <SelectValue placeholder="회색 배경 선택 필드" /> </SelectTrigger> <SelectContent> <SelectItem value="option1">Option 1</SelectItem> <SelectItem value="option2">Option 2</SelectItem> <SelectItem value="option3">Option 3</SelectItem> </SelectContent> </SelectRoot> </div> );}Form
Form 컴포넌트를 사용하여 필수값 검증과 오류 메시지를 표시할 수 있습니다.
'use client';import * as React from 'react';import Select, { SelectRoot, SelectTrigger, SelectValue, SelectContent, SelectItem,} from '@aift/ui/Select';import { FormRoot, FormField, FormLabel, FormMessage } from '@aift/ui/Form';import { Button } from '@aift/ui/Button';import { useForm, Controller } from 'react-hook-form';type FormData = { requiredField: string; optionalField: string;};export default function Form() { const { handleSubmit, formState: { errors }, control, } = useForm<FormData>({ defaultValues: { requiredField: '', optionalField: '', }, }); const onSubmit = (data: FormData) => { console.log('Form submitted:', data); alert(`제출된 데이터: ${JSON.stringify(data, null, 2)}`); }; return ( <div className="max-w-md"> <FormRoot onSubmit={handleSubmit(onSubmit)} className="space-y-4"> <Controller name="requiredField" control={control} rules={{ required: '필수 항목입니다' }} render={({ field, fieldState }) => ( <FormField name="requiredField" required status={fieldState.error ? 'destructive' : 'default'} className="gap-2" > <FormLabel>필수 선택 항목</FormLabel> <SelectRoot value={field.value} onValueChange={field.onChange} required > <SelectTrigger status={fieldState.error ? 'destructive' : 'default'} > <SelectValue placeholder="필수 항목을 선택하세요" /> </SelectTrigger> <SelectContent> <SelectItem value="option1">Option 1</SelectItem> <SelectItem value="option2">Option 2</SelectItem> <SelectItem value="option3">Option 3</SelectItem> </SelectContent> </SelectRoot> {fieldState.error && ( <FormMessage status="destructive"> {fieldState.error.message} </FormMessage> )} </FormField> )} /> <Controller name="optionalField" control={control} render={({ field }) => ( <Select label="선택 항목" options={[ { value: 'option1', label: 'Option 1' }, { value: 'option2', label: 'Option 2' }, { value: 'option3', label: 'Option 3' }, ]} placeholder="선택 항목을 선택하세요" value={field.value} onValueChange={field.onChange} /> )} /> <Button type="submit" variant="surface" color="primary"> 제출 </Button> </FormRoot> </div> );}Props
Select 컴포넌트는 Radix UI의 Select를 기반으로 하며, 여러 하위 컴포넌트로 구성됩니다.
Select.Root: 루트 컴포넌트Select.Trigger: 트리거 버튼Select.Value: 선택된 값 표시Select.Content: 드롭다운 콘텐츠Select.Item: 선택 항목Select.Group: 항목 그룹Select.Label: 그룹 레이블Select.Separator: 구분선
Simple Select
options prop을 사용해 간편하게 Select를 사용할 수 있습니다.
import Select from '@aift/ui/Select';export default function SimpleSelect() { return ( <div className="space-y-6 max-w-md"> <Select options={[ { value: 'apple', label: '사과' }, { value: 'banana', label: '바나나' }, { value: 'orange', label: '오렌지' }, ]} placeholder="과일을 선택하세요" /> </div> );}Simple Select Props
| Prop | Type | Default | Description |
|---|---|---|---|
| options | SelectOption[] | [] | 선택 옵션 목록 |
| placeholder | string | 선택하세요 | 선택 필드의 플레이스홀더 텍스트 |
| defaultValue | string | undefined | 선택 필드의 기본 값 |
| onChange | (value: string) => void | undefined | 선택 값이 변경될 때 호출되는 함수 |
| onValueChange | (value: string) => void | undefined | 선택 값이 변경될 때 호출되는 함수 |
| onOpenChange | (open: boolean) => void | undefined | 선택 필드의 열림/닫힘 상태가 변경될 때 호출되는 함수 |
| onSelect | (value: string) => void | undefined | 선택 항목이 선택될 때 호출되는 함수 |
| onDeselect | (value: string) => void | undefined | 선택 항목이 선택 해제될 때 호출되는 함수 |