Input Components

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={() => {}} />

string

required

Button text.

'default' | 'secondary' | 'outline' | 'destructive'

default:"default"

Visual style. Use "destructive" for dangerous actions like resets or deletes.

boolean

default:"false"

Disable the button.

() => 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 })}
/>

string

Label above the input.

string

Placeholder text.

string

Current value.

(value: string) => void

Called when the value changes.

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 })}
/>

string

Label above the textarea.

string

Placeholder text.

string

Current value.

(value: string) => void

Called when the value changes.

number

default:"3"

Number of visible rows.

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 })}
/>

string

Label above the input.

number

Current value.

number

Minimum value.

number

Maximum value.

number

Step increment.

(value: number) => void

Called when the value changes.

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 })}
/>

string

Label next to the switch.

boolean

default:"false"

Whether the toggle is on.

(checked: boolean) => void

Called when toggled.

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 })}
/>

string

Label above the select.

string

Currently selected value.

Array<{ label: string; value: string }>

required

Available options.

(value: string) => void

Called when selection changes.

boolean

default:"false"

Disable selection.

Custom Widgets

Extensions SDK

Button

TextField

TextArea

NumberField

Toggle

​Button

​TextField

​TextArea

​NumberField

​Toggle

​Dropdown

Button

TextField

TextArea

NumberField

Toggle

Dropdown