Select

기본 사용법

SelectRoot, SelectTrigger, SelectValue, SelectContent, SelectItem 조합으로 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>;

'use client';

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

export default function Preview() {
  return (
    <div className="space-y-6 max-w-md">
      <section>
        <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>
      </section>
    </div>
  );
}

'use client';import {  SelectTrigger,  SelectValue,  SelectContent,  SelectItem,  SelectRoot,} from '@aift/ui/Select';export default function Preview() {  return (    <div className="space-y-6 max-w-md">      <section>        <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>      </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>
  );
}

'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>
  );
}

'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>
  );
}

'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 id="cautionary" status="cautionary">
      <div className="flex flex-col gap-0.5">
        <FormLabel>주의 상태</FormLabel>
        <SelectRoot defaultValue="option1">
          <SelectTrigger id="cautionary" 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>
        </div>

      </FormField>

      <FormField id="destructive" status="destructive">
        <FormLabel>에러 상태</FormLabel>
        <SelectRoot defaultValue="option1">
          <SelectTrigger id="destructive" 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>
  );
}

'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 id="cautionary" status="cautionary">      <div className="flex flex-col gap-0.5">        <FormLabel>주의 상태</FormLabel>        <SelectRoot defaultValue="option1">          <SelectTrigger id="cautionary" 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>        </div>      </FormField>      <FormField id="destructive" status="destructive">        <FormLabel>에러 상태</FormLabel>        <SelectRoot defaultValue="option1">          <SelectTrigger id="destructive" 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>
  );
}

'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>
  );
}

'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>  );}

React Hook Form

폼에서는 검증/에러 메시지 표시가 필요하다면 SelectField 사용을 권장합니다.

폼에서 검증/에러 메시지 표시가 필요하다면 SelectField 사용을 권장합니다.

'use client';

import * as React from 'react';
import Select, {
  SelectField,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from '@aift/ui/Select';
import { Button } from '@aift/ui/Button';
import { useForm, useController, Controller } from 'react-hook-form';

type FormData = {
  selectValue1: string | undefined;
  selectValue2: string | undefined;
};

export default function Form() {
  const {
    handleSubmit,
    formState: { errors, isSubmitting },
    control,
    reset,
  } = useForm<FormData>({
    defaultValues: {
      selectValue1: undefined,
      selectValue2: undefined,
    },
  });

  const { field: selectValue1Field } = useController({
    name: 'selectValue1',
    control: control,
    rules: {
      required: '필수 항목입니다.',
    },
  });

  const { field: selectValue2Field } = useController({
    name: 'selectValue2',
    control: control,
  });

  const onSubmit = (data: FormData) => {
    console.log('Form submitted:', data);
    alert(`제출된 데이터: ${JSON.stringify(data, null, 2)}`);
  };

  return (
    <div className="max-w-md">
      <p className="text-sm text-gray-600 mb-4">
        폼에서 검증/에러 메시지 표시가 필요하다면 <b>SelectField</b> 사용을 권장합니다.
      </p>
      <form onSubmit={handleSubmit(onSubmit)} noValidate className="space-y-4">
        <SelectField
          value={selectValue1Field.value}
          onValueChange={selectValue1Field.onChange}
          name={selectValue1Field.name}
          label="SelectField 필수 선택 항목"
          required
          invalid={!!errors.selectValue1}
          errorMessage={errors.selectValue1?.message as string}
        >
          <SelectTrigger>
            <SelectValue placeholder="필수 항목을 선택하세요" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="option1">Option 1</SelectItem>
            <SelectItem value="option2">Option 2</SelectItem>
            <SelectItem value="option3">Option 3</SelectItem>
          </SelectContent>
        </SelectField>

        <SelectField
          value={selectValue2Field.value}
          onValueChange={selectValue2Field.onChange}
          name={selectValue2Field.name}
          label="SelectField 선택 항목"
          required
          invalid={!!errors.selectValue2}
          errorMessage={errors.selectValue2?.message as string}
        >
          <SelectTrigger>
            <SelectValue placeholder="필수 항목을 선택하세요" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="option1">Option 1</SelectItem>
            <SelectItem value="option2">Option 2</SelectItem>
            <SelectItem value="option3">Option 3</SelectItem>
          </SelectContent>
        </SelectField>
        <div className="flex gap-2">
          <Button type="button" variant="outlined" onClick={() => reset()}>
            초기화
          </Button>
          <Button
            type="submit"
            disabled={isSubmitting}
            variant="contained"
            color="primary"
          >
            제출
          </Button>
        </div>
      </form>
    </div>
  );
}

'use client';import * as React from 'react';import Select, {  SelectField,  SelectTrigger,  SelectValue,  SelectContent,  SelectItem,} from '@aift/ui/Select';import { Button } from '@aift/ui/Button';import { useForm, useController, Controller } from 'react-hook-form';type FormData = {  selectValue1: string | undefined;  selectValue2: string | undefined;};export default function Form() {  const {    handleSubmit,    formState: { errors, isSubmitting },    control,    reset,  } = useForm<FormData>({    defaultValues: {      selectValue1: undefined,      selectValue2: undefined,    },  });  const { field: selectValue1Field } = useController({    name: 'selectValue1',    control: control,    rules: {      required: '필수 항목입니다.',    },  });  const { field: selectValue2Field } = useController({    name: 'selectValue2',    control: control,  });  const onSubmit = (data: FormData) => {    console.log('Form submitted:', data);    alert(`제출된 데이터: ${JSON.stringify(data, null, 2)}`);  };  return (    <div className="max-w-md">      <p className="text-sm text-gray-600 mb-4">        폼에서 검증/에러 메시지 표시가 필요하다면 <b>SelectField</b> 사용을 권장합니다.      </p>      <form onSubmit={handleSubmit(onSubmit)} noValidate className="space-y-4">        <SelectField          value={selectValue1Field.value}          onValueChange={selectValue1Field.onChange}          name={selectValue1Field.name}          label="SelectField 필수 선택 항목"          required          invalid={!!errors.selectValue1}          errorMessage={errors.selectValue1?.message as string}        >          <SelectTrigger>            <SelectValue placeholder="필수 항목을 선택하세요" />          </SelectTrigger>          <SelectContent>            <SelectItem value="option1">Option 1</SelectItem>            <SelectItem value="option2">Option 2</SelectItem>            <SelectItem value="option3">Option 3</SelectItem>          </SelectContent>        </SelectField>        <SelectField          value={selectValue2Field.value}          onValueChange={selectValue2Field.onChange}          name={selectValue2Field.name}          label="SelectField 선택 항목"          required          invalid={!!errors.selectValue2}          errorMessage={errors.selectValue2?.message as string}        >          <SelectTrigger>            <SelectValue placeholder="필수 항목을 선택하세요" />          </SelectTrigger>          <SelectContent>            <SelectItem value="option1">Option 1</SelectItem>            <SelectItem value="option2">Option 2</SelectItem>            <SelectItem value="option3">Option 3</SelectItem>          </SelectContent>        </SelectField>        <div className="flex gap-2">          <Button type="button" variant="outlined" onClick={() => reset()}>            초기화          </Button>          <Button            type="submit"            disabled={isSubmitting}            variant="contained"            color="primary"          >            제출          </Button>        </div>      </form>    </div>  );}

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>
  );
}

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>  );}

Foundation Select

SelectRoot, SelectTrigger, SelectContent, SelectItem을 조합하여 커스텀 레이아웃이 필요한 경우 사용합니다.

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>
    <SelectItem value="option3">Option 3</SelectItem>
  </SelectContent>
</SelectRoot>;

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

export default function FoundationSelect() {
  return (
    <div className="space-y-6 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>
    </div>
  );
}

import {  SelectRoot,  SelectTrigger,  SelectValue,  SelectContent,  SelectItem,} from '@aift/ui/Select';export default function FoundationSelect() {  return (    <div className="space-y-6 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>    </div>  );}

SelectField Props

Prop	Type	Default	Description
label	`React.ReactNode`	`undefined`	레이블 텍스트
labelSize	`'small' \| 'medium'`	`'small'`	레이블 크기
required	`boolean`	`undefined`	필수 입력 여부
invalid	`boolean`	`undefined`	유효성 검사 실패 여부
errorMessage	`string`	`undefined`	에러 메시지 (invalid일 때 표시)
description	`string`	`undefined`	도움말 텍스트 (에러가 없을 때 하단 표시)
disabled	`boolean`	`undefined`	비활성화 여부
name	`string`	`undefined`	폼 필드 name
value	`string`	`undefined`	선택 값 (controlled)
defaultValue	`string`	`undefined`	선택 기본 값 (uncontrolled)
onValueChange	`(value: string) => void`	`undefined`	선택 값 변경 콜백

SelectRoot의 모든 props(value, defaultValue, onValueChange, disabled, required 등)를 상속합니다.

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`	선택 항목이 선택 해제될 때 호출되는 함수

Foundation Select Props

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

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

Select

On this page