HQ UI

Toggle

Toggle Buttons allow users to toggle a selection on or off, for example switching between two states or modes.

Installation

In the terminal, run the following command to begin:
npx hq-kit add toggle

Basic

Single Toggle Button

Variant

Size

Icon

Controlled

You can control the state of the toggle button by passing a isSelected prop.

Disabled

Toggle Group

You can group multiple toggle buttons into a toggle group by wrap them in a <Toggle.Group>.

Orientation

You can change the orientation of the toggle group by passing an orientation prop.

Selection Mode

You can change the selection mode of the toggle group by passing a selectionMode prop.

Variant

Controlled

You can control the state of the toggle group by passing a selectedKeys prop.

Disabled