Form fields·loomora/SearchField

SearchField

Composes TextField with search and clear affordances. Supports controlled native input props and search-specific callbacks.

Interactive live playground

Tweak props, change states, and see the live component respond in real time.

Live

How to call

Import directly from the Loomora package root. For projects without Tailwind CSS, ensure loomora/dist/index.css is imported once in your root layout.

import { SearchField } from 'loomora'

<SearchField label="Search docs" properties={{
  value, onChange: (event) => setValue(event.target.value),
  onSearch: setSubmittedQuery,
}} />

API reference

Important public props and how they affect rendering.

5 props

Prop	Type	Default	Description
properties.value / onChange	native input props	'' / —	Controlled search field state.
properties.onSearch	(value: string) => void	—	Called by the search action button.
properties.onEnter	(value: string) => void	—	Called when Enter is pressed.
properties.onClear	(clearedValue: string) => void	—	Called after the clear action.
showSearchIcon / showClearIcon	boolean	true	Shows the corresponding actions.

← All components map Back to live example ↑