SearchField

사용법

기본

검색 아이콘과 지우기 버튼이 포함된 입력 필드예요. onClear로 입력값을 초기화해요.

스타일 커스터마이징

SearchField 사용 시 className, style, `classNames`로 모든 스타일을 변경할 수 있어요. CSS 변수는 컴포넌트 루트에 지정하면 variant 기본값을 덮어써요.

className / style

<SearchField
  className="shadow-md"
  style={{
    --gtd-input-bg: "#059669",
  }}
/>

classNames 슬롯

복합 컴포넌트는 영역별로 클래스를 지정할 수 있어요.

<SearchField
  classNames={{
    root: "my-search-field-root",
    label: "my-search-field-label",
    field: "my-search-field-field",
    input: "my-search-field-input",
    clear: "my-search-field-clear"
  }}
/>

CSS 변수

인터페이스

SearchFieldProps

가져오기

import { SearchField } from "@/components/ui/SearchField";