Toggle Group

A toggle button group allows a user to toggle multiple options, with single or multiple selection.

Installation

CLI

Manual

npx shadcn add https://hq-ui.vercel.app/r/nova/toggle-group

Orientation

Horizontal

Vertical

Use variant="outline" for an outline style.

toggle-group-outline

Use the size prop to change the size of the toggle group.

toggle-group-sizes

Use spacing to add spacing between toggle group items.

toggle-group-spacing

Use orientation="vertical" for vertical toggle groups.

toggle-group-vertical

toggle-group-disabled

A custom toggle group example.

toggle-group-font-weight-selector