Search field
A React component in Beamline's Form controls category.
The search entry point: magnifier, clear button, Escape to clear, a shortcut hint and an optional live border beam.
Use it for
- Searching a page or collection, with clear and a shortcut hint.
Not for
- Global command search across the app (command-menu).
Anatomy
- field frame
- magnifier
- input (role searchbox)
- clear button or shortcut hint
- border beam (optional)
Variants
- size: sm, md, lg
- beam: off, focus, while busy
States
- empty
- typing
- has value (clear shown)
- busy (beam)
- disabled
Keyboard
- Escape clears
- Tab reaches the clear button
Motion
The beam fades in and runs only while its state lasts (focused, or busy) and stops at rest.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label (required) | ReactNode | — | Accessible name; shown only with showLabel. |
value / defaultValue / onValueChange | string / string / (value) => void | — | |
shortcut | string | — | Hint like "/" or "⌘K" while empty; the app binds the key. |
beam | boolean | "focus" | — | |
style / className | CSSProperties / string | — | Visual field root; native props and ref remain on the native control. |
classNames | FieldClassNames & Partial<Record<"input" | "clear", string>> | — | Documented field and control part classes; cannot replace refs, handlers or aria wiring. |
Dependencies
lucide-react, motion
Import
import { SearchField } from "@/components/search-field/search-field";Get it
Search field is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent
More in Form controls
- Allocation editor: Parts of a fixed whole edited as transfers: an ordered strip whose boundaries drag or step between neighbours and a roster of exact amounts where typing…
- Billing toggle: Monthly or yearly: a segmented control whose yearly note turns into what the choice saves.
- Calendar: Month grids for picking a day or a range: a real grid with arrows by day and week, Page keys by month, closed days, today's dot, and a range span that…
- Checkbox: A yes/no choice with an optional label and help, including the mixed state for select-all; the check draws itself in.
- Chip group: Quick filters as chips: a chosen chip fills and grows a check, counts show what each would return, and extra chips fold behind “+N more”.
- Color Palette: A wheel of preset colours to pick from: twelve hues around the ring, their tints inward, white at the middle; the chosen swatch lifts and carries a check.
- Colour picker: A swatch that opens a picker: saturation-brightness plane, hue strip, HEX/RGB/HSL/OKLCH value to type or copy, the screen eyedropper where available…
- Combobox: One value from a long list found by typing (time zones, countries, customers): ranked matches with the match emphasised, keywords, optional group…
- Date picker: One date in a form: a field that opens the month grid under it with focus inside, picks and closes; Today and Clear below, optional clear button.
- Date range picker: A reporting range: presets on one side and two months on the other (one on a phone); the trigger names the preset in use, and the footer counts the days.
- File drop zone: A generous target for files: drop or choose, each checked against type, size and count with the reason when turned away; uploads show progress and can be…
- Form: Validation wiring for react-hook-form (and zod) on the system's own fields: each field already links its label, help and error, so FormField hands over…
- Inline edit: Text that becomes a field in the same place: Enter (or ⌘Enter when multiline) saves, Escape cancels, leaving saves; saving shows progress and a refusal…
- Input: A single-line text field with its label, help and error wired for assistive tech, three sizes and adornments.
- Input Dissolve: A one-line field whose text breaks into specks and drifts off once it is sent, last letter first; the field is empty and ready again.
- Label: The text label tied to a form control, with a required marker that screen readers announce.
- Mention input: A composer where @people and #channels become single tokens with suggestions at the caret; the value keeps the text and where each mention sits.
- Multi-select: Several values from a known list as removable chips in the field; the list has a search field (for long lists), checkable rows and a count with Clear.
- Number field: A bounded number with − and +: arrows and Page keys step, typing is read in the locale and clamped on leaving, limits can be explained, and the label can…
- OTP input: A verification code in separate boxes backed by one real field, so paste, SMS autofill and Backspace work; optional groups like 123–456.
- Password field: A password field with a reveal control, and a strength meter when a password is being created.
- Phone input: A phone number with its country: searchable picker with country and dialling codes, “+44…” switches the country, the number groups as typed, and the…
- Radio cards: One choice among rich options as cards with optional media, icon, detail and a figure; one selection ring follows the stable choice.
- Radio group: One choice from a short visible set, each option with an optional description, vertical or in a row.
- Rich text editor: A Notion-grade writing surface: slash menu for every block, a formatting toolbar on selection, drag-to-move blocks, nesting, markdown shortcuts, paste…
- Segmented control: Two to five views or ranges of the same content (1D / 1W / 1M, List / Board): a radio group whose raised thumb slides to the choice.
- Select: One choice from a short known list, in the same frame as every text field: label, help, error, option groups and details.
- Shortcut recorder: Lets people set their own shortcut: press the keys, see them as keycaps; a clash or a browser-kept shortcut asks first. ShortcutCheatsheet lists every…
- Signature pad: A pad for a drawn signature whose ink thins with speed; undo, replay, PNG or SVG export, and typing instead for keyboards and screen readers.
- Slider: A value or range on a known scale: the thumb grows under the finger and shows its value while dragged or focused; marks, end icons and a value readout.
- Switch: A setting that applies at once: a thumb that slides on a spring and stretches under the finger, with an optional label before or after.
- Tag input: Short free-form values as tags: Enter, comma or Tab adds, a pasted list adds them all, Backspace twice removes the last; duplicates and invalid values…
- Textarea: Multi-line plain text that grows with what is typed up to a limit, with an optional character count.
- Time picker: A time of day as hour and minute segments, typed or stepped, 12- or 24-hour; the clock opens a list of times at the step.
- Toggle group: Pressable toggles where one or several can be on: alignment, bold and italic, view options; bare for toolbars or framed.