Search Field

󰕈

계약

Overview

Machine-readable contract from Component Spec.

component: search-fieldexport: SearchFieldversion: 1attributes: data-refineui=search-field

Anatomy

Part	data-refineui
root	search-field
clear	search-field-clear
icon	search-field-icon
input	search-field-input

Variants

Axis	Values
appearance	filled, plain

States

Scope	Category	Values
component	pseudo	focus-visible
component	environment	forced-colors, dir

Accessibility

Slot	Element	Native
search-field-input	input	true
search-field-clear	button	true

Keyboard

Key	Action	Native
Escape	close	—

Focus

Section	Property	Value
visual	required	true
visual	selector	:focus-visible

Layout

Property	Value
direction	logical
rtl	true

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

사용법

import { SearchField, SearchFieldIcon, SearchFieldInput, SearchFieldClear } from "@refineui/react";

<SearchField value={query} onValueChange={setQuery} />

<SearchField
  value={searchTerm}
  onValueChange={setSearchTerm}
  appearance="filled"
  aria-label="Search products"
/>

<SearchField appearance="plain" defaultValue="initial query" />

API 레퍼런스

SearchField

Prop	Default	Type	Description
value	—	string	제어형 쿼리 문자열.
defaultValue	—	string	비제어형 초기 쿼리.
onValueChange	—	(value: string) => void	쿼리 변경 시 이벤트 핸들러.
appearance	"filled"	"filled" | "plain"	시각 스타일: filled(단독) 또는 plain(조합 표면용).
disabled	false	boolean	인터랙션을 비활성화합니다.
aria-label	—	string	검색 입력의 접근 가능한 이름.

SearchFieldIcon

검색 아이콘 슬롯(기본: 검색 글리프).

SearchFieldInput

입력 요소.

SearchFieldClear

지우기 버튼(기본: dismiss 글리프).