Radio Group

Recessed circular wells where the selected option seats an embossed accent pin; arrow keys rove between options.

@emboss/radio-group

44.1 kHz

48 kHz

96 kHz

Installation

pnpm dlx shadcn@latest add @emboss/radio-group

Usage

example.tsx

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

export function Example() {
  return (
    <RadioGroup defaultValue="48" aria-label="Sample rate">
      <RadioGroupItem value="44.1" aria-label="44.1 kHz" />
      <RadioGroupItem value="48" aria-label="48 kHz" />
    </RadioGroup>
  );
}

API reference

RadioGroup

Prop	Type	Default	Description
value / defaultValue / onValueChange	string / string / (value) => void	—	Controlled and uncontrolled selection.
disabled	boolean	false	Disables the whole group.

RadioGroupItem

Prop	Type	Default	Description
value	string	—	The option this item represents.

Data attribute	Description
data-checked / data-unchecked	Reflects the selection for styling.

Keyboard

Keys	Action
`ArrowUpArrowDown`	Moves selection between options.
`Space`	Selects the focused option.

Source

View source — radio-group.tsx

radio-group.tsx

"use client";

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

export type RadioGroupProps = React.ComponentProps<typeof BaseRadioGroup>;

/**
 * A set of recessed circular wells; the selected option seats an embossed
 * accent pin. Arrow keys rove between options.
 *
 * @example
 * <RadioGroup defaultValue="48k" aria-label="Sample rate">
 *   <RadioGroupItem value="44.1k" aria-label="44.1 kHz" />
 *   <RadioGroupItem value="48k" aria-label="48 kHz" />
 * </RadioGroup>
 */
function RadioGroup({ className, ...props }: RadioGroupProps) {
  return (
    <BaseRadioGroup
      data-slot="radio-group"
      className={cn("flex flex-col gap-2.5", className)}
      {...props}
    />
  );
}

function RadioGroupItem({
  className,
  ...props
}: React.ComponentProps<typeof Radio.Root>) {
  return (
    <Radio.Root
      data-slot="radio-group-item"
      className={cn(
        "inline-flex size-4.5 shrink-0 cursor-pointer items-center justify-center rounded-full bg-well shadow-deboss-1 focus-ring transition-[box-shadow] duration-(--duration-settle) data-disabled:pointer-events-none data-disabled:opacity-50",
        className,
      )}
      {...props}
    >
      <Radio.Indicator
        data-slot="radio-group-indicator"
        className="size-2 rounded-full bg-accent shadow-emboss-1 transition-[scale,opacity] duration-(--duration-press) ease-(--ease-press) data-starting-style:scale-50 data-starting-style:opacity-0"
      />
    </Radio.Root>
  );
}

export { RadioGroup, RadioGroupItem };

CheckboxA small machined well that fills and rises when checked — state reads through color, shape, and depth together.SelectA picker with an embossed trigger and a floating option list; the highlighted option presses into the surface as you traverse.