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.

{
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
.

{
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
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
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
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?