Skip to content

Twentyfirst UIPro

HaloPro

Toggle Group

Forms · ToggleGroup, Toggle

View as Markdown

On/off buttons. A Toggle is a single pressed state (star, pin, follow). A ToggleGroup joins several: type="single" allows at most one, type="multiple" any number (text styles, filters).

Pressed state is aria-pressed; icon-only toggles take their name from label (or the option's hint).
←/→, Home and End move between the toggles of a group.
For choosing exactly one of a few views, Segmented is the closer fit.

PreviewCode

Props

ToggleGroup

Prop	Type	Notes
`items`	`(string \| Option)[]`	Required
`type?`	`"single" \| "multiple"`	`single`: at most one pressed; `multiple`: any number.
`value?`	`string[]`
`defaultValue?`	`string[]`
`onChange?`	`(value: string[]) => void`
`label`	`string`	Accessible name of the group.
`size?`	`"sm" \| "md"`
`block?`	`boolean`	Fills the width and shares it evenly; labels end in an ellipsis when space runs short.
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

Toggle

Prop	Type	Notes
`pressed?`	`boolean`
`defaultPressed?`	`boolean`
`onChange?`	`(pressed: boolean) => void`
`icon?`	`IconName`
`label?`	`string`	Accessible name; required when the toggle shows only an icon.
`size?`	`"sm" \| "md"`
`disabled?`	`boolean`
`children?`	`ReactNode`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.