Search Field

A capsule search field with a magnifying glass, in content, Liquid Glass toolbar and sidebar styles, and a filter field.

@cupertinoui/search-fieldRegistry JSON

Installation

pnpm dlx shadcn@latest add @cupertinoui/search-field

The first install also adds the macOS theme. See Installation to set up the registry.

Usage

import { FilterField, SearchField } from "@/components/ui/search-field"

<SearchField aria-label="Search" />
<FilterField aria-label="Filter files" variant="filled" size="sm" />

Examples

Variants

Default sits in content. Glass matches the Liquid Glass capsules of a toolbar, and filled is the sidebar search field of System Settings.

"use client"

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

export default function SearchFieldVariants() {
  return (
    <div className="flex w-full max-w-64 flex-col gap-4">
      <SearchField aria-label="Search" />
      <SearchField variant="glass" size="xl" aria-label="Search" />
      <SearchField variant="filled" size="lg" aria-label="Search" />
    </div>
  )
}

Sizes

"use client"

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

export default function SearchFieldSizes() {
  return (
    <div className="flex w-full max-w-56 flex-col gap-3">
      <SearchField size="sm" aria-label="Search" />
      <SearchField aria-label="Search" />
      <SearchField size="lg" aria-label="Search" />
      <SearchField size="xl" aria-label="Search" />
    </div>
  )
}

Filter field

FilterField narrows a list in place, like the field under Xcode's navigator: a filter symbol and a “Filter” placeholder, in the same styles and sizes.

App.tsx
Button.tsx
Header.tsx
Sidebar.tsx
globals.css
package.json
README.md

"use client"

import * as React from "react"

import { FilterField } from "@/components/ui/search-field"

const files = ["App.tsx", "Button.tsx", "Header.tsx", "Sidebar.tsx", "globals.css", "package.json", "README.md"]

export default function SearchFieldFilter() {
  const [query, setQuery] = React.useState("")
  const shown = files.filter((file) => file.toLowerCase().includes(query.trim().toLowerCase()))

  return (
    <div className="flex w-56 flex-col gap-2">
      <ul className="flex h-36 flex-col overflow-y-auto rounded-[8px] bg-mac-content p-1 text-mac-body text-mac-label shadow-[0_0_0_1px_var(--mac-grid)]">
        {shown.map((file) => (
          <li key={file} className="truncate rounded-[5px] px-2 py-0.5">
            {file}
          </li>
        ))}
        {!shown.length && <li className="px-2 py-0.5 text-mac-label-tertiary">No Results</li>}
      </ul>
      <FilterField
        aria-label="Filter files"
        variant="filled"
        size="sm"
        value={query}
        onChange={(event) => setQuery(event.target.value)}
      />
    </div>
  )
}

API Reference

Every part forwards the props of the underlying element. The props below are the ones CupertinoUI adds or changes.

SearchField

Accepts every input attribute; the placeholder defaults to “Search”.

Prop	Type	Description
`variant`	`"default" \| "glass" \| "filled"` Default: `"default"`	Content, toolbar or sidebar style.
`size`	`"sm" \| "default" \| "lg" \| "xl"` Default: `"default"`	20, 24, 28 or 36pt tall. Toolbars use xl.
`className`	`string`	Extra classes, merged with the component's own.

FilterField

The same field with a filter symbol; the placeholder defaults to “Filter”. Takes the same props.

Prop	Type	Description