Toggle

Toggle is like light switches for your digital digs. Flip 'em on, and they light stuff up; flip 'em off, and it's lights out.

Basic

A toggle button lets folks flip a choice on or off, like switching between two vibes or modes.

Installation

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

Single Toggle Button

Variant

You can change the variant of the toggle button by passing an variant prop.

Shape

You can change the shape of the toggle button by passing a shape prop.

Size

You can change the size of the toggle button by passing a size prop.

Controlled

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

Disabled

You can disable a toggle button by passing a disabled prop.

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

You can change the variant of the toggle group by passing a variant prop.

Controlled

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

Selected: bold

Disabled

You can disable a toggle group by passing a disabled prop.