RadioGroup

RadioGroup composes Base UI’s radio group, root, and indicator with Density control attributes on each radio root. Radio remains available as a compatibility alias.

CompactComfortable

import { useState } from "react";
import { RadioGroup } from "density-base-ui";

export default function RadioExample() {
  const [density, setDensity] = useState("compact");
  const updateDensity = (value: unknown) => {
    if (typeof value === "string") {
      setDensity(value);
    }
  };
  return (
    <RadioGroup
      value={density}
      onValueChange={updateDensity}
      items={[
        { value: "compact", label: "Compact" },
        { value: "comfortable", label: "Comfortable" },
      ]}
    />
  );
}

Props

Prop	Attribute	Values	Default
`items`	None	`{ value, label, disabled? }[]`	Required
`label`	None	React node	None
`hint`	None	React node	None
`fieldOrientation`	None	`vertical`, `horizontal`	`vertical`
`indicator`	None	React node	`●`
`emphasis`	`data-dn-emphasis`	`primary`, `secondary`, `outline`, `ghost`	`secondary`
`size`	`data-dn-size`	`2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`	`md`

Label and hint

Theme

LightDark

Applied to this workspace.

import { RadioGroup } from "density-base-ui";

export default function RadioFieldExample() {
  return (
    <RadioGroup
      label="Theme"
      hint="Applied to this workspace."
      items={[
        { value: "light", label: "Light" },
        { value: "dark", label: "Dark" },
      ]}
      value="dark"
    />
  );
}

Field orientation

Vertical

Enabled

Horizontal

Enabled

import { RadioGroup } from "density-base-ui";

const items = [{ value: "on", label: "Enabled" }];

export default function RadioFieldOrientationExample() {
  return (
    <div style={{ display: "grid", gap: "1rem" }}>
      <RadioGroup
        fieldOrientation="vertical"
        label="Vertical"
        items={items}
        value="on"
      />
      <RadioGroup
        fieldOrientation="horizontal"
        label="Horizontal"
        items={items}
        value="on"
      />
    </div>
  );
}

Indicator

LightDark

import { RadioGroup } from "density-base-ui";

export default function RadioIndicatorExample() {
  return (
    <RadioGroup
      aria-label="Theme"
      indicator="◆"
      items={[
        { value: "light", label: "Light" },
        { value: "dark", label: "Dark" },
      ]}
      value="dark"
    />
  );
}

Emphasis

Enabled

import { RadioGroup } from "density-base-ui";

const items = [{ value: "on", label: "Enabled" }];

export default function RadioEmphasisExample() {
  return (
    <div style={{ display: "grid", gap: "0.75rem" }}>
      <RadioGroup
        aria-label="Primary radio"
        emphasis="primary"
        items={items}
        value="on"
      />
      <RadioGroup
        aria-label="Secondary radio"
        emphasis="secondary"
        items={items}
        value="on"
      />
      <RadioGroup
        aria-label="Outline radio"
        emphasis="outline"
        items={items}
        value="on"
      />
      <RadioGroup
        aria-label="Ghost radio"
        emphasis="ghost"
        items={items}
        value="on"
      />
    </div>
  );
}

Size

import { RadioGroup } from "density-base-ui";

const items = [{ value: "on", label: "Enabled" }];

export default function RadioSizeExample() {
  return (
    <div style={{ display: "grid", gap: "0.75rem" }}>
      <RadioGroup aria-label="2xs radio" items={items} size="2xs" value="on" />
      <RadioGroup aria-label="xs radio" items={items} size="xs" value="on" />
      <RadioGroup aria-label="sm radio" items={items} size="sm" value="on" />
      <RadioGroup aria-label="md radio" items={items} size="md" value="on" />
      <RadioGroup aria-label="lg radio" items={items} size="lg" value="on" />
      <RadioGroup aria-label="xl radio" items={items} size="xl" value="on" />
      <RadioGroup aria-label="2xl radio" items={items} size="2xl" value="on" />
      <RadioGroup aria-label="3xl radio" items={items} size="3xl" value="on" />
    </div>
  );
}