Shim

SearchField

Enter and clear a search query.

Documentation
React Aria
Pattern
W3C ARIA
Source
GitHub
Issues
Report
Composes
Field
Install
pnpm dlx @kkga/shim add search-field
import { SearchField } from "@/shim-ui/search-field";

export default () => <SearchField aria-label="Search docs" />;

Install

Use the CLI or copy the source code manually.

pnpm dlx @kkga/shim add search-field

Controlled value

Manage the value with value and onChange to keep the search field in sync with application state.

Value: Get started

"use client";
import { useState } from "react";
import { SearchField } from "@/shim-ui/search-field";

export default () => {
  const [value, setValue] = useState("Get started");

  return (
    <>
      <SearchField aria-label="Search" onChange={setValue} value={value} />
      <p>Value: {value}</p>
    </>
  );
};

Size

Use the size prop to adjust control spacing and typography.

import { SearchField } from "@/shim-ui/search-field";

export default () => (
  <>
    <SearchField aria-label="Search docs" size={1} />
    <SearchField aria-label="Search docs" size={2} />
    <SearchField aria-label="Search docs" size={3} />
    <SearchField aria-label="Search docs" size={4} />
  </>
);

Variant

Select a variant to match the search field with its container.

import { SearchField } from "@/shim-ui/search-field";

export default () => (
  <>
    <SearchField aria-label="Search" variant="classic" />
    <SearchField aria-label="Search docs" variant="soft" />
    <SearchField aria-label="Search docs" variant="outline" />
  </>
);

Prefix icon

Provide a prefixIcon to display a decorative or functional icon. Use "filter" for filter styling or pass a custom icon component.

import { ListMagnifyingGlass } from "@phosphor-icons/react/dist/ssr";
import { SearchField } from "@/shim-ui/search-field";

export default () => (
  <>
    <SearchField
      aria-label="Filter docs"
      placeholder="Filter"
      prefixIcon="filter"
    />
    <SearchField
      aria-label="Search docs"
      prefixIcon={<ListMagnifyingGlass size={16} />}
    />
    <SearchField aria-label="Search docs" prefixIcon={null} />
  </>
);

States

Combine isDisabled, isRequired,isInvalid, and errorMessage to convey form state.

Wrong search query
import { SearchField } from "@/shim-ui/search-field";

export default () => (
  <>
    <SearchField isDisabled label="Disabled" />
    <SearchField isReadOnly label="Read only" value="Immutable" />
    <SearchField errorMessage="Wrong search query" isInvalid label="Invalid" />
  </>
);