검색과 필터 필드
검색어 입력과 구조화된 필터를 하나의 이름 있는 탐색 작업으로 구성합니다.
- 카테고리
- 폼
- 사용 컴포넌트
fieldinput-groupcomboboxalertbutton
실제 미리보기
제목과 본문을 검색하고 상태로 범위를 좁힙니다.
사용할 때
사용 기준
문서나 레코드 목록을 검색하고 제한된 필터로 범위를 좁힐 때 사용합니다.
사용하지 않을 때
검색 없이 하나의 고정 값을 고르는 폼 필드에는 사용하지 않습니다.
구조
검색 필드 label
검색어 입력
필터 선택
지우기 동작과 필드 피드백
상태
default고정 예시검색과 필터가 비어 있는 기본 탐색 상태입니다.
제목과 본문을 검색하고 상태로 범위를 좁힙니다.
filters-open직접 조작필터 popup을 직접 열어 검색과 키보드 이동을 확인합니다.
미리보기 컨트롤을 직접 조작해 이 상태를 확인합니다.
제목과 본문을 검색하고 상태로 범위를 좁힙니다.
empty고정 예시일치하는 결과가 없을 때 검색 조건을 유지하고 다음 행동을 안내합니다.
제목과 본문을 검색하고 상태로 범위를 좁힙니다.
이 검색과 일치하는 문서가 없습니다.
검색어를 지우거나 필터를 조정해 주세요.invalid고정 예시지원하지 않는 검색 값은 입력과 연결된 오류로 설명합니다.
제목과 본문을 검색하고 상태로 범위를 좁힙니다.
두 글자 이상의 검색어를 입력해 주세요.
반응형 동작
작은 화면에서는 필터를 검색 입력 아래의 전체 폭 행으로 옮깁니다.
label과 오류는 재배치 뒤에도 같은 입력을 설명합니다.
접근성
검색 label, 설명, 오류를 입력과 연결하고 필터 popup의 키보드 탐색을 유지합니다.
사용 예시
import { Alert, AlertAction } from "@/components/ui/alert"
import { Button } from "@/components/ui/button"
import { Combobox } from "@/components/ui/combobox"
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { InputGroup, InputGroupInput } from "@/components/ui/input-group"
const statusOptions = [
{ value: "all", label: "All statuses" },
{ value: "draft", label: "Draft" },
{ value: "published", label: "Published" },
]
<div>
<Field>
<FieldLabel>Search documents</FieldLabel>
<FieldDescription>Search titles and content.</FieldDescription>
<InputGroup><InputGroupInput type="search" /></InputGroup>
</Field>
<Field>
<FieldLabel>Filter by document status</FieldLabel>
<Combobox
defaultValue="all"
emptyText="No matching status."
options={statusOptions}
/>
</Field>
<Alert title="No documents match this search.">
Clear the query or adjust the status filter.
<AlertAction>
<Button variant="secondary">Clear search</Button>
</AlertAction>
</Alert>
</div>관련 문서
소스 경로
components/design-system/recipes/search-filter-field-demo.tsx소스 보기