uix-uiSearch field
Search bar with shortcut hint. 3 sizes × 3 states.
import * as React from "react";
import { SearchField } from "@/components/ui/search-field";
export default function Example() {
const [q, setQ] = React.useState("");
return (
<div style={{ width: 320, maxWidth: "100%" }}>
<SearchField placeholder="Search teas" aria-label="Search teas" value={q} onChange={e => setQ(e.target.value)} onClear={() => setQ("")} />
</div>
);
}
Installation
$ npx uix-ui@latest add search-fieldThis copies the file into components/ui/search-field.tsx in your project. npx shadcn@latest add @uix/search-field works too.
Usage
import { SearchField } from "@/components/ui/search-field";
<div style={{ width: 320, maxWidth: "100%" }}>
<SearchField placeholder="Search teas" aria-label="Search teas" value={q} onChange={e => setQ(e.target.value)} onClear={() => setQ("")} />
</div>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | sm | md | lg | "md" | |
onClear | () => void | – | Called by the clear button, which shows while the field has a value. |
shortcut | React.ReactNode | – | Shortcut hint (for example a Kbd) shown while the field is empty. |
leadingAvatar | React.ReactNode | – | Avatar at the start (for example <Avatar size="xs" initials="AB" />). |
leadingIcon | React.ReactNode | – | Icon at the start. |
leadingContent | React.ReactNode | – | Selector or text at the start, for example "Email ▾". |
leadingDivider | boolean | – | Hairline after the leading parts. |
prefix | React.ReactNode | – | Fixed text before the value, for example "https://". |
tags | React.ReactNode[] | – | Tag chips before the value. |
suffix | React.ReactNode | – | Fixed text after the value, for example ".com". |
trailingDivider | boolean | – | Hairline before the trailing parts. |
trailingContent | React.ReactNode | – | Action at the end, for example a "Copy" button. |
helpIcon | boolean | string | – | Help icon; a string becomes its accessible name and tooltip. |
trailingIcon | React.ReactNode | – | Icon at the end. |
Everything else is passed to the root element, so className, aria-* and event handlers work as usual.
Dependencies
Installed for you by the CLI.
class-variance-authorityclsxtailwind-merge
lib/utils.tscomponents/ui/icons.tsx