Density

Radio

Radio composes Base UI’s radio group, root, and indicator with Density control attributes on each radio root.

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

export default function RadioExample() {
  return (
    <Radio.Group defaultValue="compact" aria-label="Table density">
      <label>
        <Radio.Root value="compact">
          <Radio.Indicator>On</Radio.Indicator>
        </Radio.Root>
        Compact
      </label>
      <label>
        <Radio.Root value="comfortable">
          <Radio.Indicator>On</Radio.Indicator>
        </Radio.Root>
        Comfortable
      </label>
    </Radio.Group>
  );
}

Props

Prop Attribute Values Default
Radio.Root density-presentation data-dn-presentation button button
Radio.Root density-emphasis data-dn-emphasis primary, secondary, outline, ghost secondary
Radio.Root density-size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl md
Radio.Group, other Radio parts Mixed Base UI radio props None