Photonix

SearchField

A specialized input for search functionality.

Preview

⌘K
Usage
"use client";

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

export default function SearchFieldBasicExample() {
    return (
        <SearchField
            variant="rounded"
            placeholder="Search members"
            shortcutHint="⌘K"
            showClear
            style={{ width: 360 }}
        />
    );
}

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.
fullWidth
boolean
true
If true, the field will take up the full width of its container. Default is true.
width
string | number
-
Fixed width of the field.

Variants

Visual Variants

SearchField supports rounded rounded style and shortcut hints.

Visual Variants
"use client";

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

export default function SearchFieldVariantsExample() {
    return (
        <Flex direction="column" gap="md" w="100%" maxW={400}>
            <SearchField variant="default" placeholder="Default style" />
            <SearchField variant="rounded" placeholder="Rounded style" />
        </Flex>
    );
}

Shortcut Hint

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

⌘K
Shortcut Hint
"use client";

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

export default function SearchFieldShortcutExample() {
    return (
        <Flex direction="column" gap="md" w="100%" maxW={400}>
            <SearchField shortcutHint="⌘K" placeholder="Press Cmd+K to focus" />
        </Flex>
    );
}

States

Disabled state.

States
"use client";

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

export default function SearchFieldStatesExample() {
    return (
        <Flex direction="column" gap="md" w="100%" maxW={400}>
            <SearchField disabled placeholder="Disabled" />
        </Flex>
    );
}

On this page

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