Photonix UI - React Components, Templates & Figma Design System

PromptField

A specialized input for AI prompts or chat interfaces.

Preview

Usage

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

<PromptField 
  placeholder="Ask a question..." 
  onSend={(value) => console.log(value)}
/>

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

<PromptField loading placeholder="Generating..." />
<PromptField disabled placeholder="Disabled" />
<PromptField error placeholder="Error state" />

AI Selectors

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

AI Selectors

<PromptField 
  agentLabel="Coding Assistant" 
  modelLabel="Claude 3.5 Sonnet" 
  onAgentClick={() => {}} 
  onModelClick={() => {}} 
/>

Attachments

Show file attachments and previews directly inside the prompt field.

document.pdf0 Bytes

Attachments

const attachments = [
  { id: '1', file: file1, previewUrl: '...' },
  { id: '2', file: file2 }
];

<PromptField attachments={attachments} onAttachmentsChange={setAttachments} />

PromptField

Preview

Component API

PromptField

Variants

States

AI Selectors

Attachments

On this page