Photonix UI - React Components, Templates & Figma Design System

SearchField

A specialized input for search functionality.

Usage

import { SearchField } from '@photonix/ultimate';

<SearchField placeholder="Search..." />

Prop	Type	Default	Description
placeholder	`string`	`'Search'`	Placeholder text. Default is "Search".
variant	`"rounded" \| "default"`	`'default'`	Border radius variant. 'default' has standard rounded corners, 'rounded' is pill-shaped.
shortcutHint	`string`	`-`	Shortcut hint text to display (e.g., "Ctrl + /").
showClear	`boolean`	`true`	If true, shows a clear (X) button when there is text and focused.
onClear	`(() => void)`	`-`	Callback for when the clear button is clicked.
onChange	`((value: string) => void)`	`-`	Callback when the value changes.

SearchField supports rounded rounded style and shortcut hints.

Visual Variants

<SearchField variant="default" placeholder="Default style" />
<SearchField variant="rounded" placeholder="Rounded style" />

Display a keyboard shortcut badge when the field is empty or not focused.

⌘K

Shortcut Hint

<SearchField shortcutHint="⌘K" placeholder="Press Cmd+K to focus" />

Disabled state.

States

<SearchField disabled placeholder="Disabled" />