Photonix UI - React Components, Templates & Figma Design System

PromptField

A specialized input for AI prompts or chat interfaces.

Preview

Usage

"use client";

import { useState } from 'react';
import { PromptField } from '@photonix/ultimate';

const modelOptions = [
    { value: 'gpt-5', label: 'GPT-5' },
    { value: 'gpt-4.1', label: 'GPT-4.1' },
];

export default function PromptFieldBasicExample() {
    const [value, setValue] = useState('Summarize today meeting notes');

    return (
        <PromptField
            value={value}
            onChange={setValue}
            placeholder="Ask Photonix"
            agentLabel="Docs"
            modelLabel="GPT-5"
            modelOptions={modelOptions}
        />
    );
}

Component API

PromptField

Prop	Type	Default	Description
value	`string`	`-`	Input value
defaultValue	`string`	`-`	Default value
onChange	`((value: string) => void)`	`-`	Callback when text changes
placeholder	`string`	`'Ask Photonix'`	Placeholder text
onSend	`((value: string, attachments?: FileAttachment[]) => void)`	`-`	Callback when user submits (Enter or Click Send)
onAttach	`(() => void)`	`-`	Callback when clicking attachment button
attachments	`FileAttachment[]`	`[]`	List of file attachments
onAttachmentsChange	`((attachments: FileAttachment[]) => void)`	`-`	Callback when attachments change (e.g., when removing)
speechLanguage	`string`	`'vi-VN'`	Language for speech recognition (default: 'vi-VN')
agentLabel	`string`	`'Agent'`	Label for Agent selector (e.g. "Agent")
onAgentClick	`(() => void)`	`-`	Callback for Agent selector click (without dropdown)
agentOptions	`DropdownOption[]`	`-`	Options for Agent dropdown (if provided, shows dropdown)
onAgentChange	`((value: string) => void)`	`-`	Callback when agent option changes
modelLabel	`string`	`'GPT-5'`	Label for Model selector (e.g. "GPT-5")
onModelClick	`(() => void)`	`-`	Callback for Model selector click (without dropdown)
modelOptions	`DropdownOption[]`	`-`	Options for Model dropdown (if provided, shows dropdown)
onModelChange	`((value: string) => void)`	`-`	Callback when model option changes
agentSelector	`React.ReactNode`	`-`	Custom React Node for Agent selector (overrides agentLabel/agentOptions)
modelSelector	`React.ReactNode`	`-`	Custom React Node for Model selector (overrides modelLabel/modelOptions)
disabled	`boolean`	`-`	Disable interaction
error	`boolean`	`-`	Error state
loading	`boolean`	`-`	Loading state
className	`string`	`-`
style	`React.CSSProperties`	`-`

Variants

States

Visual states for loading, disabled, and error.

States

"use client";

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

export default function PromptFieldStatesExample() {
    return (
        <Flex direction="column" gap="md" w="100%" maxW={600}>
            <PromptField loading placeholder="Generating..." />
            <PromptField disabled placeholder="Disabled" />
            <PromptField error placeholder="Error state" />
        </Flex>
    );
}

AI Selectors

Customize the labels for agent and model selectors. These are usually used to toggle dropdowns.

AI Selectors

"use client";

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

export default function PromptFieldSelectorsExample() {
    return (
        <Flex direction="column" gap="md" w="100%" maxW={600}>
            <PromptField
                agentLabel="Coding Assistant"
                modelLabel="Claude 3.5 Sonnet"
                onAgentClick={() => undefined}
                onModelClick={() => undefined}
            />
        </Flex>
    );
}

Attachments

Show file attachments and previews directly inside the prompt field.

document.pdf0 Bytes

Attachments

"use client";

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

const mockAttachments = [
    {
        id: '1',
        file: new File([], 'image.png', { type: 'image/png' }),
        previewUrl: 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=100&h=100&fit=crop',
    },
    {
        id: '2',
        file: new File([], 'document.pdf', { type: 'application/pdf' }),
    },
];

export default function PromptFieldAttachmentsExample() {
    return (
        <Flex direction="column" gap="md" w="100%" maxW={600}>
            <PromptField
                attachments={mockAttachments}
                onAttachmentsChange={() => undefined}
                placeholder="Edit your prompt with attachments..."
            />
        </Flex>
    );
}

PromptField

Preview

Component API

PromptField

Variants

States

AI Selectors

Attachments

On this page