One or several recipe-filter selections with array values.
Preview
Example source could not be loaded: toggle-group-example. Reload this page to retry.Usage
Import ToggleGroup and ToggleGroupItem from @/components/ui/toggle-group. Values are arrays even with multiple={false}. The primary example uses string[], value and onValueChange(next, details); do not use a string value or a Radix-style type prop.
Composition
Give every item a distinct value and accessible name. Single selection may be deselected to an empty array. Set multiple to allow several pressed items. Items inherit scale, default appearance and group disabled state; the group's spacing defaults to 2 logical pixels.
API and accessibility
Only default variant/size are supported. Native recipe-filter sprites apply to individual items; group geometry, exclusive selection and navigation are web adaptations. See Toggle for the childless icon appearance.
See the underlying API for shared semantics.
Several stations
Example source could not be loaded: toggle-group-multiple-example. Reload this page to retry.Installation
Component source
This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.
"use client";
import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
import * as React from "react";
import { minecraftClasses as cn, minecraftStyle } from "./minecraft-render";
import type { MinecraftProps } from "./minecraft-render";
import { playMinecraftClick } from "./minecraft-sound";
import { toggleVariants } from "./toggle";
import "./minecraft-toggle-group.css";