How do I build an accessible search bar in React?

Label the search Input, place its icon in InputGroup using startElement, and render navigation results as links. Announce the filtered result count with role='status'. Use Modal for a dialog search experience with managed focus.

How do I build a command palette in React?

Use a Modal from @ninna-ui/overlays with a search Input and a keyboard-navigable list. The Modal handles focus trapping. Listen for Cmd+K to open the modal. Render filtered results as the user types.

Use Case

Build a Search Interface with React and Tailwind CSS v4

Build an accessible search interface with search bar, results list, and keyboard navigation — using Ninna UI components and Tailwind v4.

Search interface patterns

A navigation search needs a labeled input, filtered results rendered as links, and an announced result count. Native links support Tab and Enter. A command palette can also add arrow-key navigation inside a Modal.

1. Search input with icon

Use InputGroup with startElement to place a search icon beside the Input:

import { Input, InputGroup } from "@ninna-ui/forms";
import { Search } from "lucide-react";

<InputGroup startElement={<Search className="size-4" aria-hidden="true" />}>
  <Input
    type="search"
    aria-label="Search components"
    placeholder="Search components..."
    value={query}
    onChange={(event) => setQuery(event.target.value)}
  />
</InputGroup>

2. Results as navigation links

Render navigation results as real links. Announce the result count in a status region, and retain a visible keyboard focus indicator:

<p role="status">{results.length} results found</p>
<ul aria-label="Search results">
  {results.map((item) => (
    <li key={item.id}>
      <a
        href={item.href}
        className="block rounded-md px-3 py-2 text-primary focus-visible:outline-2 focus-visible:outline-primary"
      >
        {item.label}
      </a>
    </li>
  ))}
</ul>

3. Command palette pattern

For a command palette (Cmd+K), use a Modal with a search input and keyboard-navigable list. The Modal handles focus trapping, and you handle the keyboard navigation with arrow keys and Enter.

Component Docs

Input InputGroup Modal