django/shadcn-ui

Toggle Group

A set of toggles that share one outline.

Installation

uvx django_shadcn@latest add toggle_group

Usage

<c-toggle-group>
    <c-toggle-group.item>Left</c-toggle-group.item>
    <c-toggle-group.item>Center</c-toggle-group.item>
    <c-toggle-group.item>Right</c-toggle-group.item>
</c-toggle-group>

Variant and size go on the group, not on each item.

Examples

Outline

<c-toggle-group variant="outline">
    <c-toggle-group.item>Left</c-toggle-group.item>
    <c-toggle-group.item>Center</c-toggle-group.item>
    <c-toggle-group.item>Right</c-toggle-group.item>
</c-toggle-group>

Sizes

<c-toggle-group variant="outline" size="sm">...</c-toggle-group>
<c-toggle-group variant="outline" size="lg">...</c-toggle-group>

Spaced

<c-toggle-group variant="outline" spacing="1">
    <c-toggle-group.item>Left</c-toggle-group.item>
</c-toggle-group>

Notes

Radix hands variant and size down through React context. Cotton has no equivalent, so the group styles its own children with [&>*] selectors. Two data-* conditions on one element combine the way you would expect; two group-data-* would chain into a descendant selector instead, which is why the rules live on the group rather than on the item.

Each item keeps its own pressed state. Radix also offers single-selection mode, where picking one clears the rest — that needs shared state and is not here yet.