Skip to content
design
Components

Radio

An individual exclusive choice composed inside a RadioGroup.

On this page
Report cadence
An individual exclusive choice composed inside a RadioGroup.
Code
import { Radio } from "@bosunkit/components/radio";
import { RadioGroup } from "@bosunkit/components/radio-group";
import { Field } from "@bosunkit/components/field";
import type { ReactElement } from "react";
export const description: string =
  "Custom children keep native submission and exclusive selection; each radio has its own label.";
export default function Showcase(): ReactElement {
  return (
    <Field.Root>
      <RadioGroup label="Report cadence" name="cadence" defaultValue="weekly">
        <Field.Item>
          <Field.Label className="bk-choice">
            <Radio.Root value="daily">
              <Radio.Indicator />
            </Radio.Root>{" "}
            Daily
          </Field.Label>
        </Field.Item>
        <Field.Item>
          <Field.Label className="bk-choice">
            <Radio.Root value="weekly">
              <Radio.Indicator />
            </Radio.Root>{" "}
            Weekly
          </Field.Label>
        </Field.Item>
      </RadioGroup>
    </Field.Root>
  );
}
01Names describe behaviorUse the primitive for custom composition and a named recipe for an assembled control.
02One state contractControlled values, defaults and change callbacks follow Base UI; event details keep their reason and cancellation.
03Composition keeps semanticsA render target forwards its ref and every received DOM prop so keyboard interaction and accessible names survive.

Composition

Import { Radio } from @bosunkit/components/radio. Named parts follow Base UI Radio. Each part retains the upstream render, ref, DOM props, state attributes and event contracts. The kit supplies its typography, surfaces and scoped overlay presentation.

Examples

Custom composition

Report cadence
Custom children keep native submission and exclusive selection; each radio has its own label.
Code
import { Radio } from "@bosunkit/components/radio";
import { RadioGroup } from "@bosunkit/components/radio-group";
import { Field } from "@bosunkit/components/field";
import type { ReactElement } from "react";
export const description: string =
  "Custom children keep native submission and exclusive selection; each radio has its own label.";
export default function Showcase(): ReactElement {
  return (
    <Field.Root>
      <RadioGroup label="Report cadence" name="cadence" defaultValue="weekly">
        <Field.Item>
          <Field.Label className="bk-choice">
            <Radio.Root value="daily">
              <Radio.Indicator />
            </Radio.Root>{" "}
            Daily
          </Field.Label>
        </Field.Item>
        <Field.Item>
          <Field.Label className="bk-choice">
            <Radio.Root value="weekly">
              <Radio.Indicator />
            </Radio.Root>{" "}
            Weekly
          </Field.Label>
        </Field.Item>
      </RadioGroup>
    </Field.Root>
  );
}

Props

PropTypeDefaultDescription
classNamestring | ((state: State) => string | undefined) | undefined–CSS class applied to the element, or a function that returns a class based on the component's state.
renderReact.ReactElement | ComponentRenderFn<RenderFunctionProps, State> | undefined–Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render.
styleReact.CSSProperties | ((state: State) => React.CSSProperties | undefined) | undefined–Style applied to the element, or a function that returns a style object based on the component's state.
nativeButtonboolean | undefined–Whether the component renders a native <button> element when replacing it via the render prop. Set to true if the rendered element is a native button.
valuerequiredValue–The unique identifying value of the radio in a group.
disabledboolean | undefined–Whether the component should ignore user interaction.
requiredboolean | undefined–Whether the user must choose a value before submitting a form.
readOnlyboolean | undefined–Whether the user should be unable to select the radio button.
inputRefReact.Ref<HTMLInputElement> | undefined–A ref to access the hidden input element.

Also takes every attribute of Primitive.Root.Props.

PropTypeDefaultDescription
classNamestring | ((state: State) => string | undefined) | undefined–CSS class applied to the element, or a function that returns a class based on the component's state.
renderReact.ReactElement | ComponentRenderFn<RenderFunctionProps, State> | undefined–Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render.
styleReact.CSSProperties | ((state: State) => React.CSSProperties | undefined) | undefined–Style applied to the element, or a function that returns a style object based on the component's state.
keepMountedboolean | undefined–Whether to keep the HTML element in the DOM when the radio button is inactive.

Also takes every attribute of Primitive.Indicator.Props.

Do
Report cadence
Compose labeled parts and preserve their ref and DOM props.
Don't
Use the named parts for keyboard and focus behavior.
Do not replace semantic controls with clickable generic elements or discard event details.