글자 입력칸
이메일·이름 바꾸기·날짜·댓글처럼 검색이 아닌 글자 입력이에요. 크기 3·면 2(field·bare)·여러 줄(multiline)·오류 연결(aria-describedby + role=alert)을 갖추고, 같은 자리에 고르기 칸(SelectField)·체크박스(Checkbox)가 있어요.
모바일PCTextField · FieldError
고르기#
이 부품을 언제 쓰고, 언제 다른 것을 쓰는지예요.
언제 쓰나#
- 검색이 아닌 글자 입력 - 이메일·이름 바꾸기·계획 이름·날짜·댓글·여러 줄 의견(multiline). 크기 3(sm·md·lg) · 면 2(field·bare) · 오류 문장 연결(FieldError) · 고르기 칸(SelectField) · 체크박스(Checkbox, 크기 sm·md).
인터페이스#
타입에서 자동으로 뽑은 표예요.
TextField#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| value* | - | string | 지금 값이에요. |
| onChange* | - | (v: string) => void | 값이 바뀌면 새 값으로 불러요. |
| size | 'md' | 'sm' | 'md' | 'lg' | 크기예요. |
| tone | 'field' | 'field' | 'bare' | 색의 뜻이에요. |
| errorId | - | string | 오류 문장(FieldError)의 id - invalid일 때 칸이 그 문장을 가리킨다(aria-describedby) |
| invalid | - | boolean | 오류 상태 - aria-invalid + errorId 연결 |
| inputRef | - | ((instance: HTMLInputElement | null) => void | (() => void | { [UNDEFINED_VOID_ONLY]: ne… | |
| multiline | - | boolean | 여러 줄(textarea) - 크기·면 대신 AREA 한 모양 |
이 밖에 감싼 요소의 HTML 속성 310개를 그대로 받아요.
FieldError#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| id* | - | string | |
| className | - | string | 배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요. |
| children* | - | ReactNode | 안에 그릴 내용이에요. |
* 필수예요. 표는 타입에서 자동으로 뽑았어요.
접근성#
- 라벨(label 또는 aria-label)을 꼭 단다
- errorId를 주면 aria-invalid + aria-describedby로 FieldError(role="alert")를 가리킨다
- 키보드 초점은 부품이 그린다 - 칸에는 전역 초점 링(2px brand), SelectField는 껍데기가 같은 링을 그린다
가이드라인#
언제 쓰나요#
- 이메일·이름 바꾸기·계획 이름·날짜·댓글처럼 검색이 아닌 한 줄 입력
- 여러 줄 의견은 multiline · 판본처럼 몇 개 중 고르기는 SelectField · 동의는 Checkbox · 검색은 SearchField
플랫폼별 차이#
| 플랫폼 | 차이 |
|---|---|
| 모바일 | PC와 같은 모양이에요. 글자 역할만 폰 크기로 바뀌어요. |
| PC | 마우스가 있는 기기에서만 hover가 켜지고, 키보드 초점 링이 보여요. |