Photonix

SearchField

A specialized input for search functionality.

Preview

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

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

Component API

SearchField

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.

Variants

Visual Variants

SearchField supports rounded rounded style and shortcut hints.

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

Shortcut Hint

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" />

States

Disabled state.

States
<SearchField disabled placeholder="Disabled" />

On this page

Preview
Component API
Variants
Photonix UI - React Components, Templates & Figma Design System