Observable Framework 1.5.1 GitHub️ 1.8k

Toggle input

API · Source · The toggle input allows the user to choose one of two values, representing on or off. It is a specialized form of the checkbox input.

The initial value of a toggle defaults to false. You can override this by specifying the value option.

const  mute = view(Inputs.toggle({label: "Mute", value: true}));
mute

The on and off values of a toggle can be changed with the values option which defaults to [true, false].

const binary = view(Inputs.toggle({label: "Binary", values: [1, 0]}));
binary

The label can be either a text string or an HTML element. This allows more control over the label’s appearance, if desired.

const fancy = view(Inputs.toggle({label: html`<b>Fancy</b>`}));
fancy

A toggle can be disabled to prevent its value from being changed.

const frozen = view(Inputs.toggle({label: "Frozen", value: true, disabled: true}));
frozen

Options

Inputs.toggle(options)

The available toggle input options are: