셀렉트 Select

셀렉트는 사용자에게 여러 개의 옵션 목록을 팝업으로 제공하여 그 중 한 개의 값을 선택할 수 있도록 하는 경우에 사용한다.

KRDS 가이드

기본

import { Select } from '@krds.ui/react'

export default function SelectDemo() {
  return (
    // id를 줘야 레이블이 연결된다 (README 알려진 문제)
    <Select id="purpose" label="발급 용도" options={[{ value: 'submit', label: '제출용' }]} />
  )
}

Select

Props

이름	타입	기본값	설명
value	string	-	제어 상태일 때 선택된 값
defaultValue	string	-	비제어 상태일 때의 초기 선택 값
onChange	((value: string) => void)	-	선택 값이 변경될 때 호출되는 콜백
options (필수)	SelectOption[]	-	선택 옵션들
label	string	-	레이블
hint	string	-	도움말 텍스트
error	string	-	에러 메시지
size	SelectSize	large	Select 크기
variant	SelectVariant	default	Select 변형