고르기 칸 · 체크박스
글자 입력칸(TextField) 묶음의 고르기 칸(SelectField)과 체크박스(Checkbox)예요.
모바일PCSelectField · Checkbox
견본과 쓰는 법은 글자 입력칸 문서에 함께 있어요.
고르기#
- 이 이름은 글자 입력칸(TextField)에 합쳤어요. 모양은 그대로이고, 새로 쓸 때는 정본을 써요.
글자 입력칸 문서 보기 →
인터페이스#
타입에서 자동으로 뽑은 표예요.
SelectField#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| id* | - | string | |
| label* | - | string | 화면 읽기 프로그램이 읽는 이름(aria-label)이에요. |
| value* | - | string | 지금 값이에요. |
| onChange* | - | (v: string) => void | 값이 바뀌면 새 값으로 불러요. |
| face* | - | ReactNode | 겉면(지금 고른 이름 · 화살표) - aria-hidden으로 준다 |
| className | - | string | 배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요. |
| selectStyle | - | CSSProperties | |
| children* | - | ReactNode | 안에 그릴 내용이에요. |
Checkbox#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| checked* | - | boolean | |
| onChange* | - | (v: boolean) => void | 값이 바뀌면 새 값으로 불러요. |
이 밖에 감싼 요소의 HTML 속성 305개를 그대로 받아요.
* 필수예요. 표는 타입에서 자동으로 뽑았어요.
플랫폼별 차이#
| 플랫폼 | 차이 |
|---|---|
| 모바일 | PC와 같은 모양이에요. 글자 역할만 폰 크기로 바뀌어요. |
| PC | 마우스가 있는 기기에서만 hover가 켜지고, 키보드 초점 링이 보여요. |