Input Components

Input components are fully interactive on the editor and interactive surfaces. On the layer surface, they automatically render in a read-only display mode.

Button

A clickable action button.

Props

Prop	Type	Required	Description
label	string	Yes	Button text
onClick	() => void	Yes	Click handler
variant	"default" | "destructive"	No	Visual variant (default: "default")
disabled	boolean	No	Prevents clicks and shows disabled state
style	VisionStyle	No	Additional style

Layer behavior: Not rendered (hidden entirely).

Example

import { Button, useMutation } from "@zaflun/lumio-sdk";

function ActionBar() {
  const { mutate: resetScores, isLoading } = useMutation("resetScores");

  return (
    <>
      <Button
        label="Update scores"
        onClick={() => {/* ... */}}
      />
      <Button
        label="Reset all"
        variant="destructive"
        onClick={() => resetScores()}
        disabled={isLoading}
      />
    </>
  );
}

---

Toggle

A boolean on/off switch with a label.

Props

Prop	Type	Required	Description
label	string	Yes	Label text
checked	boolean	Yes	Current state
onChange	(checked: boolean) => void	Yes	Change handler
disabled	boolean	No	Prevents interaction
style	VisionStyle	No	Additional style

Layer behavior: Shows "On" or "Off" as plain text.

Example

import { Toggle, useExtensionStorage } from "@zaflun/lumio-sdk";

function VisibilityToggle() {
  const [storage, setStorage] = useExtensionStorage();

  return (
    <Toggle
      label="Show overlay"
      checked={storage.visible ?? true}
      onChange={(checked) => setStorage({ ...storage, visible: checked })}
    />
  );
}

---

TextField

A single-line text input.

Props

Prop	Type	Required	Description
label	string	Yes	Input label
value	string	Yes	Current value
onChange	(value: string) => void	Yes	Change handler
placeholder	string	No	Placeholder text
disabled	boolean	No	Makes the field non-editable
style	VisionStyle	No	Additional style

Layer behavior: Shows current value as plain text.

Example

import { TextField, useExtensionStorage } from "@zaflun/lumio-sdk";

function TeamInput() {
  const [storage, setStorage] = useExtensionStorage();

  return (
    <TextField
      label="Home team"
      value={storage.homeTeam ?? ""}
      placeholder="Enter team name"
      onChange={(value) => setStorage({ ...storage, homeTeam: value })}
    />
  );
}

---

TextArea

A multi-line text input.

Props

Prop	Type	Required	Description
label	string	Yes	Input label
value	string	Yes	Current value
onChange	(value: string) => void	Yes	Change handler
placeholder	string	No	Placeholder text
rows	number	No	Number of visible rows (default: 3)
disabled	boolean	No	Makes the field non-editable
style	VisionStyle	No	Additional style

Layer behavior: Shows current value as plain text.

Example

import { TextArea, useExtensionStorage } from "@zaflun/lumio-sdk";

function NotesInput() {
  const [storage, setStorage] = useExtensionStorage();

  return (
    <TextArea
      label="Stream notes"
      value={storage.notes ?? ""}
      placeholder="Add notes for your stream..."
      rows={4}
      onChange={(value) => setStorage({ ...storage, notes: value })}
    />
  );
}

---

NumberField

A numeric input with increment/decrement buttons.

Props

Prop	Type	Required	Description
label	string	Yes	Input label
value	number	Yes	Current value
onChange	(value: number) => void	Yes	Change handler
min	number	No	Minimum value
max	number	No	Maximum value
step	number	No	Increment step (default: 1)
disabled	boolean	No	Makes the field non-editable
style	VisionStyle	No	Additional style

Layer behavior: Shows current value as plain text.

Example

import { NumberField, useExtensionStorage } from "@zaflun/lumio-sdk";

function ScoreInput() {
  const [storage, setStorage] = useExtensionStorage();

  return (
    <NumberField
      label="Home score"
      value={storage.homeScore ?? 0}
      min={0}
      max={99}
      onChange={(value) => setStorage({ ...storage, homeScore: value })}
    />
  );
}

---

Dropdown

A select input with a list of options.

Props

Prop	Type	Required	Description
label	string	Yes	Input label
value	string	Yes	Currently selected value
options	{ value: string; label: string }[]	Yes	Available options
onChange	(value: string) => void	Yes	Change handler
disabled	boolean	No	Prevents selection
style	VisionStyle	No	Additional style

Layer behavior: Shows the selected option's label as plain text.

Example

import { Dropdown, useExtensionStorage } from "@zaflun/lumio-sdk";

function PositionSelector() {
  const [storage, setStorage] = useExtensionStorage();

  return (
    <Dropdown
      label="Position"
      value={storage.position ?? "top-right"}
      options={[
        { value: "top-left", label: "Top left" },
        { value: "top-right", label: "Top right" },
        { value: "bottom-left", label: "Bottom left" },
        { value: "bottom-right", label: "Bottom right" },
      ]}
      onChange={(value) => setStorage({ ...storage, position: value })}
    />
  );
}

---

Slider

A range input for selecting a numeric value within a range.

Props

Prop	Type	Required	Description
label	string	Yes	Input label
value	number	Yes	Current value
min	number	Yes	Minimum value
max	number	Yes	Maximum value
onChange	(value: number) => void	Yes	Change handler
step	number	No	Increment step (default: 1)
showValue	boolean	No	Show current value next to label (default: true)
disabled	boolean	No	Prevents interaction
style	VisionStyle	No	Additional style

Layer behavior: Shows current numeric value as plain text.

Example

import { Slider, useExtensionStorage } from "@zaflun/lumio-sdk";

function OpacitySlider() {
  const [storage, setStorage] = useExtensionStorage();

  return (
    <Slider
      label="Opacity"
      value={storage.opacity ?? 100}
      min={0}
      max={100}
      step={5}
      onChange={(value) => setStorage({ ...storage, opacity: value })}
    />
  );
}