Develop

ToggleGroup#

Toggle Group is a collection of toggle buttons that supports the 'on' or 'off' state of a single or multiple toggle buttons.

import { ToggleGroup, ToggleItem } from "wis/toggle"

API Reference#

Name	Type	Default	Description
variant	`basic` `compact`	basic	The visual variant to apply to toggle group.
disabled	`boolean`	false	When `true`, prevents the user from interacting with the toggle item in toggle group.
size	`md` `sm`	md	The size of the toggle group.
value	`string` `string[]`	none	The value of selected item in the group. Must be used in conjunction with `onChange`.
defaultValue	`string` `string[]`	none	The default value of selected item in the group.
multiple	`boolean`	false	When `true`, allows multiple items to be selected.
onChange	`(value: string \| string[]) => void`	none	Event handler called when the toggle group item press state changed.

Name	Type	Default	Description
text	`string`	none	The text information displayed on the toggle item.
disabled	`boolean`	false	When `true`, prevents the user from interacting with the toggle item.
icon	`ReactNode`	none	The icon element will be displayed next to the toggle item text.
iconControl	`prefix` `suffix`	prefix	Controls the display position of the icon relative to the text.
value	`boolean`	none	The unique value of the toggle item.
shortcutKey	`string`	none	Sets a global shortcut key, such as `Control+I`. When the user presses the combination key, the toggle item's click event will be triggered. View Keyboard