SearchField

A search input with a built-in clear button and optional search icon. Supports submit events, clear events, and keyboard shortcuts (Escape to clear).

Import

import { SearchField } from '@proyecto-viviana/solid-spectrum';

Basic Usage

A search field with a clear button and submit handler.

Last search: none

<SearchField
  label="Search"
  placeholder="Search for items..."
  onSubmit={(value) => console.log('Search:', value)}
  onClear={() => console.log('Cleared')}
/>

Sizes

Three size variants to fit different layout contexts.

Small

Medium

Large

<SearchField label="Small" size="sm" placeholder="Search..." />
<SearchField label="Medium" size="md" placeholder="Search..." />
<SearchField label="Large" size="lg" placeholder="Search..." />

Variants

Outline and filled visual styles.

Outline (default)

Filled

<SearchField label="Outline" variant="outline" placeholder="Search..." />
<SearchField label="Filled" variant="filled" placeholder="Search..." />

With Description

Add helper text below the field.

Product Search

Press Enter to search, Escape to clear

<SearchField
  label="Product Search"
  placeholder="Enter product name or SKU..."
  description="Press Enter to search, Escape to clear"
/>

States

Disabled and invalid states.

Disabled

Invalid

Invalid search query

<SearchField label="Disabled" defaultValue="can't change" isDisabled />
<SearchField label="Invalid" defaultValue="bad query" isInvalid errorMessage="Invalid search" />

Props

Prop	Type	Default	Description
`label`	string	—	Visible label for the field
`value`	string	—	Controlled value
`defaultValue`	string	—	Uncontrolled initial value
`onChange`	(value: string) => void	—	Called on every keystroke
`onSubmit`	(value: string) => void	—	Called when Enter is pressed
`onClear`	() => void	—	Called when the clear button is clicked or Escape pressed
`placeholder`	string	—	Placeholder text
`size`	'sm' \| 'md' \| 'lg'	`'md'`	Size variant
`variant`	'outline' \| 'filled'	`'outline'`	Visual style
`isDisabled`	boolean	`false`	Prevents interaction
`isInvalid`	boolean	`false`	Shows error styling
`errorMessage`	string	—	Validation error message
`description`	string	—	Helper text below the field

Accessibility

Uses role="searchbox" for proper semantics
Clear button has an accessible label ("Clear search")
Escape key clears the field and refocuses it
Enter key triggers the onSubmit callback
Works with aria-label if no visible label is provided