SearchField

Alpha

An accessible search input with role='search', clear button, and search submission. Wraps input type='search' with proper ARIA.

Import

import { SearchField } from "@compa11y/react";

Usage

Example.tsx

import { useState } from "react";
import { SearchField, Button, Text } from "@compa11y/react";

function SearchExample() {
  const [query, setQuery] = useState("");

  return (
    <div style={{ display: "flex", gap: "8px", alignItems: "end" }}>
      <SearchField
        value={query}
        onValueChange={setQuery}
        onSearch={(q) => console.log("Searching:", q)}
        placeholder="Search components..."
      />
      <Button onClick={() => console.log("Search:", query)}>
        Search
      </Button>
    </div>
  );
}

Features

Wrapped in role='search' landmark
type='search' input with aria-label
Clear button with aria-label='Clear search'
onSearch callback for submission
Escape key clears the input
Screen reader announcements for results count

Props

SearchField component props
Prop	Type	Default	Description
`value`	`string`	-	Controlled search value
`onValueChange`	`(value: string) => void`	-	Called as the user types
`onSearch`	`(value: string) => void`	-	Called when the user submits (Enter)
`onClear`	`() => void`	-	Called when the user clears the field
`placeholder`	`string`	`'Search...'`	Placeholder text
`disabled`	`boolean`	`false`	Disables the search field
`aria-label`	`string`	`'Search'`	Accessible label

Keyboard Interactions

Accessibility

All keyboard interactions follow WAI-ARIA best practices and work without any additional configuration.

Keyboard shortcuts for SearchField
Key	Action
`Enter`	Submits the search
`Escape`	Clears the search field
`Tab`	Moves focus between the input and clear button