Const// Single-select, controlled mode
let selected = 'left';
m(ToggleGroup, {
value: selected,
onchange: (v) => selected = v,
items: [
{ value: 'left', iconName: 'format_align_left', tooltip: 'Align Left' },
{ value: 'center', iconName: 'format_align_center', tooltip: 'Align Center' },
{ value: 'right', iconName: 'format_align_right', tooltip: 'Align Right' }
]
});
// Multi-select, controlled mode
let selected = ['bold', 'italic'];
m(ToggleGroup, {
multiple: true,
value: selected,
onchange: (v) => selected = v,
items: [
{ value: 'bold', iconName: 'format_bold', tooltip: 'Bold' },
{ value: 'italic', iconName: 'format_italic', tooltip: 'Italic' },
{ value: 'underline', iconName: 'format_underlined', tooltip: 'Underline' }
]
});
// Uncontrolled mode
m(ToggleGroup, {
defaultValue: 'left',
onchange: (v) => console.log('Changed to:', v),
items: [...]
});
ToggleGroup component.
A group of toggle buttons that can operate in single-select or multi-select mode. The component supports both controlled and uncontrolled modes.
Controlled mode: Manage the state externally using the
valueprop. Uncontrolled mode: Let the component manage its own state usingdefaultValue.