PRIZM 4.0DSTA
All components

Radio Group

Pick one of several mutually exclusive options.

stableBase UI Radio

Preview

Code

tsx
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Label } from "@/components/ui/label";

export function Example() {
  return (
    <RadioGroup defaultValue="medium">
      <div className="flex items-center gap-3">
        <RadioGroupItem id="critical" value="critical" />
        <Label htmlFor="critical">Critical</Label>
      </div>
      <div className="flex items-center gap-3">
        <RadioGroupItem id="high" value="high" />
        <Label htmlFor="high">High</Label>
      </div>
      <div className="flex items-center gap-3">
        <RadioGroupItem id="medium" value="medium" />
        <Label htmlFor="medium">Medium</Label>
      </div>
    </RadioGroup>
  );
}

Props

PropTypeDefaultDescription
valuestring—Controlled selected value.
defaultValuestring—Uncontrolled initial value.
onValueChange(value: string) => void—Called when the selection changes.
disabledbooleanfalseDisables the whole group.
classNamestring—Additional Tailwind classes, merged with the component's defaults via cn().

Sub-components

RadioGroupItem— An individual radio option.
PropTypeDefaultDescription
valuestring—This item's value.
idstring—Used for Label htmlFor pairing.
disabledbooleanfalseDisables just this option.

Built on Base UI Radio + RadioGroup. Keyboard: arrows navigate, Space selects. Always pair each item with a `Label`.

All components also accept standard HTML attributes for their root element (e.g. `id`, `aria-*`, `data-*`, event handlers) and forward `ref` where applicable.

Source

The full implementation of components/ui/radio-group.tsx is below — copy it into your project and own it. Some components import the cn helper from lib/utils or other primitives; copy those too.

tsx
"use client";

import { cn } from "@/lib/utils";
import { Radio as BaseRadio } from "@base-ui-components/react/radio";
import { RadioGroup as BaseRadioGroup } from "@base-ui-components/react/radio-group";
import type { ComponentPropsWithoutRef } from "react";

export function RadioGroup({
  className,
  ...props
}: ComponentPropsWithoutRef<typeof BaseRadioGroup>) {
  return <BaseRadioGroup className={cn("grid gap-2", className)} {...props} />;
}

export function RadioGroupItem({
  className,
  ...props
}: ComponentPropsWithoutRef<typeof BaseRadio.Root>) {
  return (
    <BaseRadio.Root
      className={cn(
        "peer inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-border-strong bg-surface shadow-sm transition-colors",
        "data-[checked]:border-accent",
        "focus-visible:outline-1 focus-visible:outline-offset-0 focus-visible:outline-accent",
        "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
        className,
      )}
      {...props}
    >
      <BaseRadio.Indicator className="h-2 w-2 rounded-full bg-accent data-[unchecked]:hidden" />
    </BaseRadio.Root>
  );
}

JavaFX

Ships in the PRIZM JavaFX library for thick-client C3 apps as PrizmRadioGroup (extends VBox). Run the gallery to see it natively.

java
import design.prizm.fx.controls.PrizmRadioGroup;

PrizmRadioGroup()
PrizmRadioGroup(String... options)
PropTypeDefaultDescription
addOption(String) → PrizmRadioGroupItem—Add an option; returns the item, already joined to the shared ToggleGroup.
getSelected() → String—The selected option's text, or null.
select(String) → void—Select the option with the given text.
getToggleGroup() → ToggleGroup—The shared toggle group.

JavaFX has no radio-group container, so PrizmRadioGroup is a composite (VBox + shared ToggleGroup) holding PrizmRadioGroupItem options, styled by the .radio-button rules in prizm.css. Mirrors RadioGroup + RadioGroupItem in components/ui/radio-group.tsx.