Search Box

InstallationCopy Anchor Link

Installs Input and Field too.

UsageCopy Anchor Link

import { useState } from "react";
import { Field, FieldLabel } from "@/components/ui/field";
import { SearchBox } from "@/components/ui/search-box";

export function ServiceSearch() {
  const [query, setQuery] = useState("");
  return (
    <Field>
      <FieldLabel>Search services</FieldLabel>
      <SearchBox
        value={query}
        onValueChange={setQuery}
        placeholder="Search services"
        clearLabel="Clear search"
      />
    </Field>
  );
}

Use Search Box for finding things in a list, a table or the whole site. Give it a visible label or an aria-label, and a placeholder that says what is searched. Translate clearLabel on Arabic pages. Search results are your own: this component only collects the query.

AnatomyCopy Anchor Link

• Box: the same border and fill as Input.
• Search icon: on the start side, decorative.
• Input (type="search"): the query.
• Clear button: on the end side, shown when there is text.

ExamplesCopy Anchor Link

Clear buttonCopy Anchor Link

Type to show the clear button. It empties the field, returns focus to it and calls onValueChange with an empty string. Esc does the same.

StatesCopy Anchor Link

Default, filled with the clear button, read-only, disabled, and the medium size with a darker fill.

RTLCopy Anchor Link

The search icon is on the right (start) and the clear button on the left (end). The icons are not directional, so they are not flipped. Arabic placeholders and queries align right.

AccessibilityCopy Anchor Link

• A native type="search" input, announced as a search field.
• The clear button has an accessible name (clearLabel), a 24px target and its own focus ring.
• Put the field in a <form role="search"> or a search landmark so people can jump to it.
• Announce the number of results in a live region (role="status") when they update.

API ReferenceCopy Anchor Link

Deviations from DGACopy Anchor Link

• Figma's trailing icon variant (clear or voice) is a real clear button with a name, and returns focus to the field.
• States follow Input: no outline, a centre-out underline, and lighter and darker without a border at rest.

ContrastCopy Anchor Link