검색 입력
필터 팝오버와 시트가 함께 쓰는 검색 줄이에요. 폰 키보드의 Enter가 '검색'으로 보여요.
고르기#
이 부품을 언제 쓰고, 언제 다른 것을 쓰는지예요.
언제 쓰나#
- 글자로 찾는 입력 - 검색창, 검색을 여는 버튼 모양까지.
사용 예제#
할 일마다 실물과 코드예요. 편집을 누르면 코드를 고쳐 바로 볼 수 있어요.
페이지 머리에 크게 두기#
해부도#
- 1
컨테이너
상자예요. bare면 상자 없이 여백만 남아요.
- 2
돋보기
icon={false}로 뺄 수 있어요.
- 3
입력
폰 키보드의 Enter가 '검색'으로 보여요.
- 4
지우기
글자가 있을 때만 생겨요.
속성#
인터페이스#
타입에서 자동으로 뽑은 표예요.
SearchField#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| value* | - | string | 지금 값이에요. |
| onChange* | - | (v: string) => void | 값이 바뀌면 새 값으로 불러요. |
| onEnter | - | () => void | |
| placeholder | - | string | 비어 있을 때 보이는 안내예요. 화면 읽기 이름으로도 써요. |
| autoFocus | - | boolean | |
| className | - | string | 배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요. |
| inputClassName주의 | - | string | |
| icon | true | boolean | 라벨 앞에 놓을 아이콘이에요. |
| size | 'md' | 'md' | 'lg' | 크기예요. |
| bare | - | boolean | |
| inputRef | - | RefObject<HTMLInputElement | HTMLTextAreaElement | null> | |
| label | - | string | 읽어 주는 이름(없으면 placeholder) |
| leading | - | ReactNode | 왼쪽 자리 - 주면 돋보기 대신 이것(돋보기도 같이 두려면 직접 넣는다) |
| overlay | - | ReactNode | 입력 뒤에 겹쳐 그리는 층(고스트 자동완성) - 주면 입력을 relative 칸으로 감싼다 |
| extra | - | ReactNode | 지우기 앞 자리 |
| action | - | ReactNode | 지우기 뒤 자리(보내기) |
| empty | - | ReactNode | 값이 없을 때 지우기 자리에 둘 것(ESC 힌트) |
| inputProps | - | SearchFieldInputProps | |
| onClear | - | () => void | 지우기 - 비우기 말고 더 할 일이 있을 때(선택 줄 초기화 등). 주면 onChange('') 대신 이것 |
| clearTitle | - | string | |
| clearTap | 'tap44' | 'tap44' | 'tap44-y' | 옆에 붙은 단추가 있으면 세로만 넓힌다(tap44-y) |
| multiline | - | boolean | 여러 줄 컴포저(textarea, 높이 자동 · 상한 160px) |
| as | 'div' | 'div' | 'label' | 감싸는 요소 - 'label'이면 칸 어디를 눌러도 입력에 초점 |
* 필수예요. 표는 타입에서 자동으로 뽑았어요.
스펙#
상태 · 슬롯마다 실제로 그려지는 값이에요.
SearchField#
base
bare=true
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | 좌우 여백 | 12px |
| icon | 크기 | 16px |
bare=false, size=lg
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | 높이 | 48px |
| 좌우 여백 | 14px |
bare=false, size=md
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | 높이 | 44px |
| 좌우 여백 | 12px |
값은 컴포넌트 코드에서 뽑았고, 토큰 이름을 누르면 파운데이션으로 가요. 토큰이 없는 값만 숫자로 적었어요.
접근성#
가이드라인#
이렇게 써요#
쓰는 규칙#
이렇게 써요
- placeholder에 무엇을 찾을 수 있는지 적어요.
문구#
- placeholder에 무엇으로 찾는지 적어요("지역·단지·브랜드").
- "검색어를 입력하세요" 같은 말은 쓰지 않아요.
플랫폼별 차이#
| 플랫폼 | 차이 |
|---|---|
| 모바일 | PC와 같은 모양이에요. 글자 역할만 폰 크기로 바뀌어요. |
| PC | 마우스가 있는 기기에서만 hover가 켜지고, 키보드 초점 링이 보여요. |