Toggle

The Toggle category in the @bentley/ui-core package includes the Toggle and LabeledToggle components for working with a Toggle switch.

Toggle Component

The Toggle React component is used to toggle an option on and off with a single click or tap. It should be used instead of a Checkbox for settings when the new value will be used immediately. The Toggle component has support for the Light and Dark themes.

Properties

There are a number of properties that determine the value, color, size and shape of the Toggle.

The isOn prop indicates whether the Toggle is "on" or "off". The default is false.

The buttonType prop specifies either a Blue button or Primary (green) button. The default is Blue.

The large prop indicates whether the Toggle should be larger.

The rounded prop indicates whether the Toggle should be rounded (default) or square.

The showCheckmark prop indicates whether to show a check mark icon when the toggle is "on".

The LabeledToggle React component displays a label to the right of the Toggle.

Examples

<Toggle isOn={true} />
<Toggle isOn={true} buttonType={ToggleButtonType.Primary} />
<Toggle isOn={true} large={true} />
<Toggle isOn={true} rounded={false} />
<Toggle isOn={true} showCheckmark={true} />
<LabeledToggle isOn={true} label="Toggle label" />

Dark Mode

API Reference

• Toggle

Last Updated: 29 November, 2022