SearchInput

forms

Search input with magnifying glass icon, clear button, focus ring, role=search landmark, and native search input type. Token-driven styling with placeholder and icon colors.

Import

typescript
import { SearchInput } from "packages/ui/src";

Props

SearchInputProps

PropTypeRequired
valuestringNo
onChange(value) => void, placeholder?: string, ariaLabel?: stringNo

Examples

SearchInput Component

Search input with magnifying glass icon, clear button, focus ring, and role=search landmark. 43rd component.

Live Filtering

  • Button
  • Card
  • Tabs
  • Alert
  • Modal
  • Tooltip
  • Badge
  • Spinner

Pre-filled Search

Empty State

Metadata

Component Metadata
Familyforms
FrameworksNext.js, Astro/EmDash
DescriptionSearch input with magnifying glass icon, clear button, focus ring, role=search landmark, and native search input type. Token-driven styling with placeholder and icon colors.
PropsSearchInputProps (value?: string, onChange?: (value) => void, placeholder?: string, ariaLabel?: string)
Statesempty, with-value, focused, clearing
A11y
  • role=search on container
  • aria-label on input
  • Clear button with aria-label
  • Search icon is aria-hidden
Responsive
  • Full-width by default
  • Focus ring on focus-within
Motion
  • Border color and box-shadow transition on focus
Token Dependencies
  • components.searchInput.background
  • components.searchInput.borderColor
  • components.searchInput.borderRadius
  • components.searchInput.padding
  • components.searchInput.fontSize
  • components.searchInput.textColor
  • components.searchInput.placeholderColor
  • components.searchInput.iconColor
  • components.searchInput.iconSize
  • components.searchInput.focusBorderColor
  • components.searchInput.focusRing
  • components.searchInput.clearColor
  • components.searchInput.clearHoverColor
Content Slotsplaceholder (string), ariaLabel (string)
CMS Bindings
  • Placeholder from CMS config
  • Search query value from app state
Test Cases
  • Renders search input
  • Has role=search
  • Shows placeholder
  • Has aria-label
  • Shows clear button when value present
  • Hides clear button when empty
  • Calls onChange on input
  • Passes className through