Searchbar

Search input with a field variant and an icon that expands into a field.

Default

An always-open search field with a leading icon. Give it an aria-label that names what is searched.

Shortcut

shortcut shows a key hint at the end of the field. A string renders as one Kbd.

⌘K

Expand

variant="expand" is icon-only at rest. Focus widens it over 200ms and reveals the placeholder. Place it at the end of a toolbar so it grows to the left.

12 members

import { Button, PlusIcon, Searchbar } from "@smallest-inc/ui";

export default function SearchbarExpand() {
  return (
    <div className="flex w-full items-center justify-end gap-3">
      <span className="mr-auto text-sm font-medium text-fg">12 members</span>
      <Searchbar variant="expand" aria-label="Search members" placeholder="Search members…" />
      <Button>
        <PlusIcon />
        Invite members
      </Button>
    </div>
  );
}

Expanded width

expandedWidth sets the open width of the expand variant. The default is 200px.

Disabled

Best practices

When to use

Use to filter the list or table on the current page, such as calls, agents, or members.
Use Command for app-wide search and Combobox to pick a value from a list.

Behavior

Use the field variant when search is a primary action on the page, and variant="expand" in a crowded toolbar, placed at the end so it grows to the left.
Add shortcut (“⌘K”) only when the shortcut is actually bound.
Set expandedWidth to fit typical queries; the default is 200px.

Content

Write the placeholder as “Search <items>…”, naming what is searched.

Accessibility

Always pass an aria-label that names what is searched; the placeholder is not a label and is hidden in the collapsed expand variant.

PreviousScroll Area NextSelect