Build · New

Search Bar

Search in an app header: a 56px rounded bar with the menu button, the search input and up to two actions or an avatar.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/search-bar

Usage

import { SearchBar } from "@/components/ui/search-bar";

<SearchBar
  label="Search"
  leading={<IconButton variant="ghost" size="md" shape="round" icon={ListIcon} label="Menu" />}
  trailing={<IconButton variant="ghost" size="md" shape="round" icon={MicrophoneIcon} label="Search by voice" />}
/>

Examples

Actions

One or two trailing actions (Show 2nd button). A back arrow at the start points the reading direction.

API reference

SearchBar

Also takes <input> props.

Prop	Type	Description
`label`	`string`	The input's screen reader name and placeholder. Write it in the page language.
`leading`	`ReactNode`	Leading Button: usually a round ghost IconButton for the menu.
`trailing`	`ReactNode`	Trailing Button 1 and 2, or the avatar (Show avatar).

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	The menu button, then the input with the focus ring around the bar, then the actions.

ARIA

The bar is role="search" and the input type="search" with a name (label).
Icon buttons need names (label on IconButton).

Arabic and RTL notes

Mirrors

The menu button sits at the start (the right), the actions at the end (the left).

Does not mirror

The menu, magnifier and microphone icons don't mirror.

Numerals: No numbers in the bar.
Arabic typography: label-16.
Mixed-direction text: The input takes dir="auto".

All components ›