Select

짧은 목록에서 하나를 고르는 시스템 선택 메뉴.

개요

미리보기

예시 언어동작 줄이기

리포트 주기

label

hint

error

requireddisabled

placeholder

이렇게 선택지가 대략 7개 이하일 때 네이티브 select를 먼저 쓰고, 더 길면 Combobox를 쓴다. 기본값이 없으면 자리표시 문구는 “선택해 주세요”다. 선택지 이름은 결과를 예측할 수 있게 쓴다.
이렇게 라벨은 항상 보이게 둔다. placeholder는 예시일 뿐 라벨이 아니다.
이렇게 옵션이 5개 이하이고 한눈에 비교해야 하면 RadioGroup이나 SegmentedControl.
이렇게 하지 않기 커스텀 드롭다운을 만들지 않는다. 검색이 필요하면 Combobox.

이름	타입	기본값	설명
`label`	`ReactNode`	`리포트 주기`	항상 보이는 라벨(<label for> 또는 <legend>). placeholder로 대신하지 않는다.
`hint?`	`ReactNode`		상시 도움말. FieldMessage로 그리고 aria-describedby의 첫 번째로 연결한다. 비우면 없음.
`error?`	`ReactNode`		오류 문장. 있으면 aria-invalid="true". 오류 노드는 항상 마운트되어 있고 내용만 바뀐다.
`required?`	`boolean`	`false`	required 속성과 함께 라벨 옆에 “필수” 텍스트를 보인다(별표만 쓰지 않음).
`disabled?`	`boolean`	`false`	Tab에서 빠지고 제출되지 않는다. 값을 보여 줘야 하면 readOnly를 쓴다.
`placeholder?`	`string`		value=""인 첫 옵션(“선택해 주세요”). 숨기지 않는다. 선택을 강제하려면 required와 함께.
`children`	`ReactNode`	—	네이티브 <option>·<optgroup>. 미리보기는 표본 3개(하나는 disabled).
`ref`	—	—	ref는 <select>로 전달된다.
그 밖의 속성	—	—	name, value, defaultValue, onChange, onBlur, autoComplete, aria-* 등 네이티브 속성은 입력 요소로 전달된다. id를 주면 라벨 연결에 그 id를 쓴다. className·style은 받지 않는다.

예시

이렇게 · 이렇게 하지 않기

이렇게 선택지가 대략 7개 이하일 때 네이티브 select를 먼저 쓰고, 더 길면 Combobox를 쓴다. 기본값이 없으면 자리표시 문구는 “선택해 주세요”다. 선택지 이름은 결과를 예측할 수 있게 쓴다.

이렇게 라벨은 항상 보이게 둔다. placeholder는 예시일 뿐 라벨이 아니다.

이렇게 옵션이 5개 이하이고 한눈에 비교해야 하면 RadioGroup이나 SegmentedControl.

이렇게 하지 않기 커스텀 드롭다운을 만들지 않는다. 검색이 필요하면 Combobox.

토큰과 속성

이름	타입	기본값	설명
`label`	`ReactNode`	`리포트 주기`	항상 보이는 라벨(<label for> 또는 <legend>). placeholder로 대신하지 않는다.
`hint?`	`ReactNode`		상시 도움말. FieldMessage로 그리고 aria-describedby의 첫 번째로 연결한다. 비우면 없음.
`error?`	`ReactNode`		오류 문장. 있으면 aria-invalid="true". 오류 노드는 항상 마운트되어 있고 내용만 바뀐다.
`required?`	`boolean`	`false`	required 속성과 함께 라벨 옆에 “필수” 텍스트를 보인다(별표만 쓰지 않음).
`disabled?`	`boolean`	`false`	Tab에서 빠지고 제출되지 않는다. 값을 보여 줘야 하면 readOnly를 쓴다.
`placeholder?`	`string`		value=""인 첫 옵션(“선택해 주세요”). 숨기지 않는다. 선택을 강제하려면 required와 함께.
`children`	`ReactNode`	—	네이티브 <option>·<optgroup>. 미리보기는 표본 3개(하나는 disabled).
`ref`	—	—	ref는 <select>로 전달된다.
그 밖의 속성	—	—	name, value, defaultValue, onChange, onBlur, autoComplete, aria-* 등 네이티브 속성은 입력 요소로 전달된다. id를 주면 라벨 연결에 그 id를 쓴다. className·style은 받지 않는다.