본문으로 건너뛰기

Select

Select는 사용자가 여러 옵션 중 하나를 선택할 수 있도록 하는 드롭다운 컴포넌트입니다. 옵션 목록에서 단일 항목을 선택하는 경우에 사용됩니다.

인터랙티브 예제​

아래 UI에서 다양한 속성을 직접 변경하여 Select 컴포넌트의 모습을 확인해보세요.

Select

sizeselect
Select의 크기
placeholderstring
Select의 플레이스홀더
disabledPlaceholderboolean
Select의 비활성화 플레이스홀더
hintTextstring
Select의 힌트 텍스트
destructiveboolean
Select 검증 오류
optionItemsarray
Select의 옵션 아이템
optionItemobject
아이템 편집
idnumber
Select의 옵션 아이템의 아이디
labelstring
Select의 옵션 아이템의 라벨
optionItemobject
아이템 편집
idnumber
Select의 옵션 아이템의 아이디
labelstring
Select의 옵션 아이템의 라벨
optionItemobject
아이템 편집
idnumber
Select의 옵션 아이템의 아이디
labelstring
Select의 옵션 아이템의 라벨
registerobject
Select의 등록 객체
typeselect
Select의 타입

기본 사용법​

import { Select } from '@ncds/ui-admin';

function App() {
  return (
    <Select
      placeholder="과일을 선택하세요"
      optionItems={[
        { id: 'apple', label: '사과' },
        { id: 'banana', label: '바나나' },
        { id: 'orange', label: '오렌지' },
      ]}
    />
  );
}

Props​

PropTypeDefaultDescription
type"default" | "simple""default"선택 필드의 뷰 타입입니다.
icon{ icon: IconName; color?: string; size?: number }-선택 필드 앞에 표시될 아이콘입니다.
placeholderstring-사용자가 옵션을 선택하기 전에 표시될 안내 텍스트입니다.
disabledPlaceholderbooleanfalse플레이스홀더를 선택 불가능하게 설정합니다.
hintTextstring-선택 필드 아래에 표시될 힌트 텍스트입니다.
destructivebooleanfalse오류 상태를 나타내는 빨간색 테두리를 표시합니다.
size"xs" | "sm" | "md""md"선택 필드의 크기를 설정합니다.
optionItems{ id: string | number; label: string }[]-드롭다운에 표시할 옵션 목록입니다.
registerUseFormRegisterReturn-react-hook-form과 연동하기 위한 register 객체입니다.
idstring-선택 필드의 HTML id 속성입니다.
classNamestring-추가 CSS 클래스를 지정합니다.
valuestring-선택 필드의 현재 값입니다.

상세 예제 (Detailed Examples)​

타입 (Type)​

Select 컴포넌트는 default, simple 두 가지 타입으로 제공됩니다.



크기 (Size)​

Select 컴포넌트는 xs, sm, md 세 가지 크기로 제공됩니다.





힌트 텍스트 (Hint Text)​

Select 컴포넌트에 힌트 텍스트를 추가하여 사용자에게 추가 정보를 제공할 수 있습니다.

거주 중인 국가를 선택해주세요.

거주 중인 국가를 선택해주세요.

아이콘 (Icon)​

icon 속성을 사용하여 선택 필드 앞에 아이콘을 표시할 수 있습니다.

에러 상태 (Destructive)​

destructive 속성을 사용하여 오류 상태를 나타낼 수 있습니다.

연락 방법을 선택해야 합니다.

연락 방법을 선택해야 합니다.

플레이스홀더 비활성화 (Disabled Placeholder)​

disabledPlaceholder 속성을 true로 설정하면 사용자가 플레이스홀더를 선택할 수 없게 됩니다.

React Hook Form과 함께 사용하기​

Select 컴포넌트는 register 속성을 통해 React Hook Form과 함께 사용할 수 있습니다.

import { Select } from '@ncds/ui-admin';
import { useForm } from 'react-hook-form';

function FormExample() {
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Select
        placeholder="언어를 선택하세요"
        register={register('language', { required: true })}
        optionItems={[
          { id: 'ko', label: '한국어' },
          { id: 'en', label: '영어' },
          { id: 'ja', label: '일본어' },
        ]}
      />
      <button type="submit">제출</button>
    </form>
  );
}