Toggle Group

A set of two-state buttons that can be toggled on or off.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/icon"	"github.com/axadrn/shadcn-templ/v2/components/togglegroup") templ ToggleGroupDemo() {	@togglegroup.ToggleGroup(togglegroup.Props{		Variant: togglegroup.VariantOutline,		ToggleMultiple: true,	}) {		@togglegroup.Item(togglegroup.ItemProps{			Value:      "bold",			Attributes: templ.Attributes{"aria-label": "Toggle bold"},		}) {			@icon.Bold()		}		@togglegroup.Item(togglegroup.ItemProps{			Value:      "italic",			Attributes: templ.Attributes{"aria-label": "Toggle italic"},		}) {			@icon.Italic()		}		@togglegroup.Item(togglegroup.ItemProps{			Value:      "strikethrough",			Attributes: templ.Attributes{"aria-label": "Toggle strikethrough"},		}) {			@icon.Underline()		}	}}

Installation

shadcn-templ add toggle-group

Copy and paste the following code into your project.

components/togglegroup/togglegroup.templ

package togglegroup import (	"strconv" 	"github.com/axadrn/shadcn-templ/v2/components/toggle"	"github.com/axadrn/shadcn-templ/v2/utils") type Orientation string const (	OrientationHorizontal Orientation = "horizontal"	OrientationVertical   Orientation = "vertical") // Re-export toggle's variant/size so consumers only import togglegroup.type Variant = toggle.Varianttype Size = toggle.Size const (	VariantDefault = toggle.VariantDefault	VariantOutline = toggle.VariantOutline	SizeDefault    = toggle.SizeDefault	SizeSm         = toggle.SizeSm	SizeLg         = toggle.SizeLg) type Props struct {	ID          string	Class       string	Attributes  templ.Attributes	// ToggleMultiple allows multiple pressed items (Base UI toggleMultiple).	ToggleMultiple bool	Variant     Variant	Size        Size	Orientation Orientation	// Spacing is the gap between items in Tailwind spacing units. Defaults	// to 2; 0 joins the items into one bar (utils.Ptr(0)).	Spacing *int} templ ToggleGroup(props ...Props) {	{{ var p Props }}	if len(props) > 0 {		{{ p = props[0] }}	}	if p.Orientation == "" {		{{ p.Orientation = OrientationHorizontal }}	}	{{ spacing := 2 }}	if p.Spacing != nil {		{{ spacing = *p.Spacing }}	}	{{ ctx = toggle.WithGroupDefaults(ctx, p.Variant, p.Size, spacing) }}	<div		if p.ID != "" {			id={ p.ID }		}		role="group"		data-slot="toggle-group"		data-tui-toggle-group		data-toggle-multiple?={ p.ToggleMultiple }		if p.Variant != "" {			data-variant={ string(p.Variant) }		}		if p.Size != "" {			data-size={ string(p.Size) }		}		data-spacing={ strconv.Itoa(spacing) }		data-orientation={ string(p.Orientation) }		data-horizontal?={ p.Orientation == OrientationHorizontal }		data-vertical?={ p.Orientation == OrientationVertical }		style={ "--gap: " + strconv.Itoa(spacing) }		class={			utils.CN(				"cn-toggle-group group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-vertical:flex-col data-vertical:items-stretch",				p.Class,			),		}		{ p.Attributes... }	>		{ children... }	</div>} // ItemProps mirror toggle.Props, ToggleGroupItem's pendant.type ItemProps = toggle.Props // Item is the ToggleGroupItem pendant: a toggle that picks up the group's// variant, size and spacing from context.templ Item(props ...ItemProps) {	{{ var p ItemProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	@toggle.Toggle(p) {		{ children... }	}}

Component scripts are loaded through the shared script bundle, see JavaScript.

Update the import paths to match your project setup.

Usage

import "github.com/axadrn/shadcn-templ/v2/components/togglegroup"

@togglegroup.ToggleGroup(togglegroup.Props{}) {	@togglegroup.Item(togglegroup.ItemProps{Value: "a"}) {		A	}	@togglegroup.Item(togglegroup.ItemProps{Value: "b"}) {		B	}	@togglegroup.Item(togglegroup.ItemProps{Value: "c"}) {		C	}}

Composition

Use the following composition to build a ToggleGroup:

togglegroup.ToggleGroup├── togglegroup.Item└── togglegroup.Item

Outline

Use Variant: togglegroup.VariantOutline for an outline style.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/togglegroup") templ ToggleGroupOutline() {	@togglegroup.ToggleGroup(togglegroup.Props{		Variant: togglegroup.VariantOutline,			}) {		@togglegroup.Item(togglegroup.ItemProps{			Value:      "all",			Pressed:    true,			Attributes: templ.Attributes{"aria-label": "Toggle all"},		}) {			All		}		@togglegroup.Item(togglegroup.ItemProps{			Value:      "missed",			Attributes: templ.Attributes{"aria-label": "Toggle missed"},		}) {			Missed		}	}}

Size

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

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/togglegroup") templ ToggleGroupSize() {	<div class="flex flex-col gap-4">		@togglegroup.ToggleGroup(togglegroup.Props{						Size:    togglegroup.SizeSm,			Variant: togglegroup.VariantOutline,		}) {			@togglegroup.Item(togglegroup.ItemProps{				Value:      "top",				Pressed:    true,				Attributes: templ.Attributes{"aria-label": "Toggle top"},			}) {				Top			}			@togglegroup.Item(togglegroup.ItemProps{				Value:      "bottom",				Attributes: templ.Attributes{"aria-label": "Toggle bottom"},			}) {				Bottom			}			@togglegroup.Item(togglegroup.ItemProps{				Value:      "left",				Attributes: templ.Attributes{"aria-label": "Toggle left"},			}) {				Left			}			@togglegroup.Item(togglegroup.ItemProps{				Value:      "right",				Attributes: templ.Attributes{"aria-label": "Toggle right"},			}) {				Right			}		}		@togglegroup.ToggleGroup(togglegroup.Props{						Variant: togglegroup.VariantOutline,		}) {			@togglegroup.Item(togglegroup.ItemProps{				Value:      "top",				Pressed:    true,				Attributes: templ.Attributes{"aria-label": "Toggle top"},			}) {				Top			}			@togglegroup.Item(togglegroup.ItemProps{				Value:      "bottom",				Attributes: templ.Attributes{"aria-label": "Toggle bottom"},			}) {				Bottom			}			@togglegroup.Item(togglegroup.ItemProps{				Value:      "left",				Attributes: templ.Attributes{"aria-label": "Toggle left"},			}) {				Left			}			@togglegroup.Item(togglegroup.ItemProps{				Value:      "right",				Attributes: templ.Attributes{"aria-label": "Toggle right"},			}) {				Right			}		}	</div>}

Spacing

Use Spacing to add spacing between toggle group items.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/togglegroup"	"github.com/axadrn/shadcn-templ/v2/utils") templ ToggleGroupSpacing() {	@togglegroup.ToggleGroup(togglegroup.Props{				Size:    togglegroup.SizeSm,		Variant: togglegroup.VariantOutline,		Spacing: utils.Ptr(2),	}) {		@togglegroup.Item(togglegroup.ItemProps{			Value:      "top",			Pressed:    true,			Attributes: templ.Attributes{"aria-label": "Toggle top"},		}) {			Top		}		@togglegroup.Item(togglegroup.ItemProps{			Value:      "bottom",			Attributes: templ.Attributes{"aria-label": "Toggle bottom"},		}) {			Bottom		}		@togglegroup.Item(togglegroup.ItemProps{			Value:      "left",			Attributes: templ.Attributes{"aria-label": "Toggle left"},		}) {			Left		}		@togglegroup.Item(togglegroup.ItemProps{			Value:      "right",			Attributes: templ.Attributes{"aria-label": "Toggle right"},		}) {			Right		}	}}

Vertical

Use Orientation: togglegroup.OrientationVertical for vertical toggle groups.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/icon"	"github.com/axadrn/shadcn-templ/v2/components/togglegroup"	"github.com/axadrn/shadcn-templ/v2/utils") templ ToggleGroupVertical() {	@togglegroup.ToggleGroup(togglegroup.Props{		ToggleMultiple: true,		Orientation: togglegroup.OrientationVertical,		Spacing:     utils.Ptr(1),	}) {		@togglegroup.Item(togglegroup.ItemProps{			Value:      "bold",			Pressed:    true,			Attributes: templ.Attributes{"aria-label": "Toggle bold"},		}) {			@icon.Bold()		}		@togglegroup.Item(togglegroup.ItemProps{			Value:      "italic",			Pressed:    true,			Attributes: templ.Attributes{"aria-label": "Toggle italic"},		}) {			@icon.Italic()		}		@togglegroup.Item(togglegroup.ItemProps{			Value:      "underline",			Attributes: templ.Attributes{"aria-label": "Toggle underline"},		}) {			@icon.Underline()		}	}}

Disabled

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/icon"	"github.com/axadrn/shadcn-templ/v2/components/togglegroup") templ ToggleGroupDisabled() {	@togglegroup.ToggleGroup(togglegroup.Props{ToggleMultiple: true}) {		@togglegroup.Item(togglegroup.ItemProps{			Value:      "bold",			Disabled:   true,			Attributes: templ.Attributes{"aria-label": "Toggle bold"},		}) {			@icon.Bold()		}		@togglegroup.Item(togglegroup.ItemProps{			Value:      "italic",			Disabled:   true,			Attributes: templ.Attributes{"aria-label": "Toggle italic"},		}) {			@icon.Italic()		}		@togglegroup.Item(togglegroup.ItemProps{			Value:      "strikethrough",			Disabled:   true,			Attributes: templ.Attributes{"aria-label": "Toggle strikethrough"},		}) {			@icon.Underline()		}	}}

Custom

A custom toggle group example.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/field"	"github.com/axadrn/shadcn-templ/v2/components/togglegroup"	"github.com/axadrn/shadcn-templ/v2/utils") templ ToggleGroupCustom() {	@field.Field(field.Props{Class: "max-w-xs"}) {		@field.Label() {			Font Weight		}		@togglegroup.ToggleGroup(togglegroup.Props{			ID:      "font-weight-group",						Variant: togglegroup.VariantOutline,			Size:    togglegroup.SizeLg,			Spacing: utils.Ptr(2),		}) {			@togglegroup.Item(togglegroup.ItemProps{				Value:      "light",				Class:      "flex size-16 flex-col items-center justify-center rounded-xl",				Attributes: templ.Attributes{"aria-label": "Light"},			}) {				<span class="text-2xl leading-none font-light">Aa</span>				<span class="text-xs text-muted-foreground">Light</span>			}			@togglegroup.Item(togglegroup.ItemProps{				Value:      "normal",				Pressed:    true,				Class:      "flex size-16 flex-col items-center justify-center rounded-xl",				Attributes: templ.Attributes{"aria-label": "Normal"},			}) {				<span class="text-2xl leading-none font-normal">Aa</span>				<span class="text-xs text-muted-foreground">Normal</span>			}			@togglegroup.Item(togglegroup.ItemProps{				Value:      "medium",				Class:      "flex size-16 flex-col items-center justify-center rounded-xl",				Attributes: templ.Attributes{"aria-label": "Medium"},			}) {				<span class="text-2xl leading-none font-medium">Aa</span>				<span class="text-xs text-muted-foreground">Medium</span>			}			@togglegroup.Item(togglegroup.ItemProps{				Value:      "bold",				Class:      "flex size-16 flex-col items-center justify-center rounded-xl",				Attributes: templ.Attributes{"aria-label": "Bold"},			}) {				<span class="text-2xl leading-none font-bold">Aa</span>				<span class="text-xs text-muted-foreground">Bold</span>			}		}		@field.Description() {			Use <code id="font-weight-code" class="rounded-md bg-muted px-1 py-0.5 font-mono">font-normal</code> to set the font weight.		}	}	<script nonce={ templ.GetNonce(ctx) }>		(() => {			const group = document.getElementById("font-weight-group");			const code = document.getElementById("font-weight-code");			group.addEventListener("toggle-change", () => {				const value = group.getAttribute("data-tui-toggle-group-value");				if (value) code.textContent = "font-" + value;			});		})();	</script>}

API Reference

ToggleGroup

The togglegroup.ToggleGroup component wraps its items into a single or multiple selection group.

Prop	Type	Default
`ToggleMultiple`	`bool`	`false`
`Variant`	`VariantDefault \| VariantOutline`	`default`
`Size`	`SizeDefault \| SizeSm \| SizeLg`	`default`
`Spacing`	`*int`	`0`
`Orientation`	`OrientationHorizontal \| OrientationVertical`	`horizontal`
`Disabled`	`bool`	`false`
`Class`	`string`	-

Toggle Tooltip

On This Page

Installation Usage Composition Outline Size Spacing Vertical Disabled Custom API Reference ToggleGroup

Ship your shadcn-templ app with goilerplate

The Go + templ SaaS boilerplate. Auth, payments, UI. Done.

Now $99 instead of $199.