Skip to main content
Input components are interactive in the editor and control panel. On the OBS layer, they render as static display-only text showing their current value (since viewers can’t interact with the overlay).

​
Button

A clickable button with variant styling. 
<Button label="Save" onClick={() => handleSave()} />
<Button label="Reset Score" variant="destructive" onClick={() => setStorage({ ...storage, score: 0 })} />
<Button label="Secondary Action" variant="secondary" onClick={() => {}} />
<Button label="Outline Style" variant="outline" onClick={() => {}} />
​
label
string
required
Button text.
​
variant
'default' | 'secondary' | 'outline' | 'destructive'
default:"default"
Visual style. Use "destructive" for dangerous actions like resets or deletes.
​
disabled
boolean
default:"false"
Disable the button.
​
onClick
() => void
Click handler.
Buttons don’t render at all on the OBS layer — there’s no one to click them.

​
TextField

Single-line text input with an optional label. 
<TextField
  label="Display Name"
  placeholder="Enter a name..."
  value={storage.name ?? ""}
  onChange={(value) => setStorage({ ...storage, name: value })}
/>
​
label
string
Label above the input.
​
placeholder
string
Placeholder text.
​
value
string
Current value.
​
onChange
(value: string) => void
Called when the value changes.
​
disabled
boolean
default:"false"
Disable editing.

​
TextArea

Multi-line text input. Use for longer content like descriptions or messages. 
<TextArea
  label="Description"
  placeholder="Write something..."
  value={storage.description ?? ""}
  rows={4}
  onChange={(value) => setStorage({ ...storage, description: value })}
/>
​
label
string
Label above the textarea.
​
placeholder
string
Placeholder text.
​
value
string
Current value.
​
onChange
(value: string) => void
Called when the value changes.
​
rows
number
default:"3"
Number of visible rows.
​
disabled
boolean
default:"false"
Disable editing.

​
NumberField

Numeric input with optional min, max, and step constraints. 
<NumberField
  label="Font Size"
  value={storage.fontSize ?? 16}
  min={8}
  max={72}
  step={1}
  onChange={(value) => setStorage({ ...storage, fontSize: value })}
/>
​
label
string
Label above the input.
​
value
number
Current value.
​
min
number
Minimum value.
​
max
number
Maximum value.
​
step
number
Step increment.
​
onChange
(value: number) => void
Called when the value changes.
​
disabled
boolean
default:"false"
Disable editing.

​
Toggle

On/off switch with an optional label. 
<Toggle
  label="Show on stream"
  checked={storage.visible ?? false}
  onChange={(checked) => setStorage({ ...storage, visible: checked })}
/>
​
label
string
Label next to the switch.
​
checked
boolean
default:"false"
Whether the toggle is on.
​
onChange
(checked: boolean) => void
Called when toggled.
​
disabled
boolean
default:"false"
Disable interaction.
Select from a list of predefined options. 
<Dropdown
  label="Position"
  value={storage.position ?? "top-left"}
  options={[
    { label: "Top Left", value: "top-left" },
    { label: "Top Right", value: "top-right" },
    { label: "Bottom Left", value: "bottom-left" },
    { label: "Bottom Right", value: "bottom-right" },
  ]}
  onChange={(value) => setStorage({ ...storage, position: value })}
/>
​
label
string
Label above the select.
​
value
string
Currently selected value.
​
options
Array<{ label: string; value: string }>
required
Available options.
​
onChange
(value: string) => void
Called when selection changes.
​
disabled
boolean
default:"false"
Disable selection.