Switch | GistUI

Preview

Loading preview…

$dark = true
root = Stack(Switch("dark", "Dark mode", bind:$dark), Switch("beta", "Beta features"), $dark ? Tag("Dark is on", tone:info) : Tag("Dark is off"))

Signature

This is the line a model reads in the system prompt.

Switch(name, label, bind:$var, checked)

Group: Forms
Children: No
Positional arguments: name, label (a trailing ? means it may be left out)

Props

Prop	Type	How to write it	Notes
`name`	string	positional, required
`label`	string	positional, required
`bind`	`$state` variable	`bind:$name`	two-way binding to a $variable
`checked`	flag	bare word: `checked`

Use your own component

Keep the name and schema, swap what is drawn. The prompt and the model’s output do not change.

import { ui } from "@gistui/react/ui";

const lib = ui.extend({ Switch: MySwitch });
<GistUI library={lib} stream={response.body} />;

<GistUI :source="answer" :components="{ Switch: MySwitch }" />

<GistUI source={answer} components={{ Switch: MySwitch }} />

<GistUI source={answer()} components={{ Switch: MySwitch }} />

import { ui } from "@gistui/vanilla/ui";

const lib = ui.extend({ Switch: (ctx) => ({ el: myElement(ctx) }) });

See Custom components for the full contract. Style hook: [data-gistui="Switch"].