Search Field

󰕈

󰕋

󰕈

󰕇

Sizes

Contract

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
size	sm, md, lg

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

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

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" />

<SearchField size="lg" aria-label="Search everything" />

Sizes match Input (sm · md · lg). Inside Field, SearchField inherits the field size when size is omitted.

API Reference

SearchField

Prop	Default	Type	Description
value	—	string	Controlled query string.
defaultValue	—	string	Uncontrolled initial query.
onValueChange	—	(value: string) => void	Event handler when query changes.
appearance	"filled"	"filled" | "plain"	Visual style: filled (standalone) or plain (for composed surfaces).
size	"md"	"sm" | "md" | "lg"	Control size — same tiers as Input. Inherits from Field when omitted; plain only takes the size's typography and icon sizes.
disabled	false	boolean	Disables interaction.
aria-label	—	string	Accessible name for the search input.

SearchFieldIcon

Search icon slot (defaults to search glyph).

SearchFieldInput

Input element.

SearchFieldClear

Clear button (defaults to dismiss glyph).