Toggle
Toggle Buttons allow users to toggle a selection on or off, for example switching between two states or modes.
Installation
Basic
Preview
Code
Single Toggle Button
Variant
Preview
Code
Size
Preview
Code
Icon
Preview
Code
Controlled
You can control the state of the toggle button by passing a isSelected
prop.
Preview
Code
Disabled
Preview
Code
Toggle Group
You can group multiple toggle buttons into a toggle group by wrap them in a <Toggle.Group>
.
Preview
Code
Orientation
You can change the orientation of the toggle group by passing an orientation
prop.
Preview
Code
Selection Mode
You can change the selection mode of the toggle group by passing a selectionMode
prop.
Preview
Code
Variant
Preview
Code
Controlled
You can control the state of the toggle group by passing a selectedKeys
prop.
Preview
Code
Disabled
Preview
Code