UIToggleGroupElement


The parameters for creating a toggle group element.

Options

The options to display in the toggle group are defined using the options property. It can contain one or more options and each option renders a toggle.

Toggle group basic
A group with a single option
{
  type: "ToggleGroup",
  options: [{ label: "Option A", value: "optionA" }],
  value: [],
  onChange: ({ value, id }) => { }
}

Alignment

By default, the toggles are aligned to the start of the group, but it can be changed to end by setting the alignment property to end.

Toggle group end alignment
The toggles are aligned to the end
{
  type: "ToggleGroup",
  alignment: "end",
  label: "All options",
  options: [
    { label: "Option A", value: "optionA" },
    { label: "Option B", value: "optionB" },
  ],
  value: ["optionA"],
  onChange: ({ value, id }) => { }
}

Label

As a control, the toggle group can have a label displayed above the toggles.

{
  type: "ToggleGroup",
  label: "All options",
  options: [
    { label: "Option A", value: "optionA" },
    { label: "Option B", value: "optionB" },
  ],
  value: ["optionA"],
  onChange: ({ value, id }) => { }
}

Properties

type

type: "ToggleGroup"


value

value: string[] = valueSchema

The value of the toggle group.

Default Value

[]


options

options: UIControlElementOption[]

The options to display in the toggle group.


onChange()

onChange: (args: { value: string[]; id: string; }) => void

The function to call when the value of the toggle group changes.

Parameters

Parameter
Type
Description

args

{ value: string[]; id: string; }

The arguments passed to the function.

args.value

string[]

Array of the selected values.

args.id

string

The id of the toggle group element.

Returns

void


id

id: string

The ID of the element.


alignment?

optional alignment: "start" | "end"

The alignment of the toggle group.

Default Value

"start"


onCreate()?

optional onCreate: (args: { id: string; }) => void

A function to call when the element is created.

Parameters

Parameter
Type
Description

args

{ id: string; }

The arguments passed to the function.

args.id

string

The id of the element.

Returns

void


onDestroy()?

optional onDestroy: (args: { id: string; }) => void

A function to call when the element is destroyed.

Parameters

Parameter
Type
Description

args

{ id: string; }

The arguments passed to the function.

args.id

string

The id of the element.

Returns

void


label?

optional label: string

Label text to display above the element and used for screen readers.

Last updated

Was this helpful?