Exclusive choices using Minecraft Checkbox artwork.
Preview
Example source could not be loaded: radio-group-example. Reload this page to retry.Usage
Import RadioGroup and RadioGroupItem from @/components/ui/radio-group. Give each item a distinct value, and control the group with value/onValueChange(next, details) or use defaultValue.
Composition
Name the group with aria-label or aria-labelledby, and associate each item with its own Label. Items inherit scale and disabled state from the group. To implement a clear action, set controlled value to an empty value as in the retained playground; activating the selected radio alone does not provide toggle deselection.
API and accessibility
The artwork is square Checkbox imagery, not circular radio artwork. Group layout, exclusive selection and keyboard navigation are web adaptations. Scale defaults to 2; disabling the group disables its items.
See the underlying API for shared semantics.
Disabled group
Example source could not be loaded: radio-group-disabled-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 { Radio as RadioPrimitive } from "@base-ui/react/radio";
import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-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 "./minecraft-radio-group.css";