Prompt Variable
A template exposes its variables as slots users complete before running — some editable, some locked by the system.
Loading demo: prompt-variable-real-world
Installation
npx sdaia-ui@latest add prompt-variable
Usage
import { PromptVariable } from "sdaia-ui"1<PromptVariable2label="Variable: Language_Target"3type="string"4helper="Used in 3 places"5defaultValue="TypeScript 5.4"6/>
Examples
Brand
A raised surface — the default style.
Loading demo: prompt-variable-brand
Neutral
A subtle surface.
Loading demo: prompt-variable-neutral
Outline
A transparent surface with a default border.
Loading demo: prompt-variable-outline
Editable & Locked
The locked state disables the input and recolours the state badge + marker.
Loading demo: prompt-variable-states
API Reference
Prop | Type | Default | Required |
|---|---|---|---|
variant | 'brand' | 'neutral' | 'outline' | 'brand' | optional |
locked | boolean | false | optional |
label | ReactNode | — | optional |
type | ReactNode | — | optional |
showType / showState | boolean | true | optional |
helper | ReactNode | — | optional |
value / defaultValue / onChange | input attrs | — | optional |
dir | 'ltr' | 'rtl' | — | optional |