SearchPill

molecules

307×40 search input with leading magnifier icon. 30px border-radius (pill shape). Border darkens to teal + 4px glow on focus. Used in admin header as the global search.

ARIA Role: search

Demo

Demo for SearchPill (molecules)

307×40 search input with leading magnifier icon. 30px border-radius (pill shape). Border darkens to teal + 4px glow on focus. Used in admin header as the global search.

Props

Prop	Type	Required	Default	Description
`placeholder`	`string`	No	`'admin.search.placeholder'`
`value`	`string`	No	`—`
`onSearch`	`(query: string) => void`	Yes	`—`	Debounced 300ms

TypeScript Interface

interface SearchPillProps {
  placeholder?: string;
  value?: string;
  onSearch: (query: string) => void;
  ariaLabel?: string;
  width?: number;
}

Assertions (NASA Rule 5)

[type]onSearch must be a function(NASA Rule 5)
[aria]Input must have type='search' and associated <label> with className 'sr-only'(WCAG 1.3.1, 3.3.2)

Usage

Import

import { Searchpill } from '@epasslive/design-system'

Basic

<Searchpill />

With Variants

<Searchpill variant="primary" size="md" />