Radio Group

A set of radio buttons for selecting a single option from a list, ready for CMS integration.

CMSPayload CMS Integration

Radio groups can be configured through CMS fields, allowing content editors to customize options, labels, and default selections without code changes.

CMS Demo

See how content editors configure radio groups in a CMS:

Shipping Method

Standard Shipping5-7 business days

Express Shipping1-2 business days

OvernightNext business day

CMS FieldsEN

Group Label

Option Labels (3)

Required

Disabled

This simulates how a content editor configures radio groups in Payload CMS. Switch locales to see localized content.

CMS ConfigurationSimulates Payload CMS radio group fields with localization

Payload Form Example

// In your Payload CMS form config
export const ShippingOptions = {
  slug: "shipping-options",
  fields: [
    {
      name: "shippingMethod",
      type: "group",
      fields: [
        { name: "label", type: "text", localized: true, required: true },
        {
          name: "options",
          type: "array",
          fields: [
            { name: "value", type: "text", required: true },
            { name: "label", type: "text", localized: true, required: true },
            { name: "description", type: "text", localized: true },
          ],
        },
        { name: "defaultValue", type: "text" },
      ],
    },
  ],
}

Rendering the Form

import { RadioGroup, RadioGroupItem } from "@mordecai-design-system/ui"

export function ShippingForm({ data }) {
  const field = data.shippingMethod
  return (
    <div className="space-y-4">
      <label className="text-sm font-medium">{field.label}</label>
      <RadioGroup defaultValue={field.defaultValue}>
        {field.options.map((option) => (
          <div key={option.value} className="flex items-start gap-3">
            <RadioGroupItem value={option.value} id={option.value} />
            <div>
              <label htmlFor={option.value} className="text-sm font-medium">
                {option.label}
              </label>
              {option.description && (
                <p className="text-xs text-muted-foreground">{option.description}</p>
              )}
            </div>
          </div>
        ))}
      </RadioGroup>
    </div>
  )
}

Basic Usage

Default

Comfortable

Compact

Radio GroupA default radio group

Installation

pnpm add @corew500/ui

Usage

import { RadioGroup, RadioGroupItem } from "@mordecai-design-system/ui"

<RadioGroup defaultValue="option-one">
  <div className="flex items-center gap-2">
    <RadioGroupItem value="option-one" id="option-one" />
    <label htmlFor="option-one">Option One</label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="option-two" id="option-two" />
    <label htmlFor="option-two">Option Two</label>
  </div>
</RadioGroup>

Examples

With Descriptions

<RadioGroup defaultValue="standard">
  <div className="flex items-start gap-3">
    <RadioGroupItem value="standard" id="standard" />
    <div>
      <label htmlFor="standard" className="text-sm font-medium">Standard</label>
      <p className="text-xs text-muted-foreground">Delivery in 5-7 business days</p>
    </div>
  </div>
  <div className="flex items-start gap-3">
    <RadioGroupItem value="express" id="express" />
    <div>
      <label htmlFor="express" className="text-sm font-medium">Express</label>
      <p className="text-xs text-muted-foreground">Delivery in 1-2 business days</p>
    </div>
  </div>
</RadioGroup>

Controlled

const [value, setValue] = useState("option-one")

<RadioGroup value={value} onValueChange={setValue}>
  ...
</RadioGroup>

Disabled

<RadioGroup disabled>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="option-one" id="option-one" />
    <label htmlFor="option-one">Option One</label>
  </div>
</RadioGroup>

Props

RadioGroup

Prop	Type	Default	Description
`disabled`	enum	`false`	Whether the component should ignore user interaction.
`readOnly`	enum	`false`	Whether the user should be unable to select a different radio button in the group.
`required`	enum	`false`	Whether the user must choose a value before submitting a form.
`name`	string	—	Identifies the field when a form is submitted.
`value`	any	—	The controlled value of the radio item that should be currently selected. To render an uncontrolled radio group, use the `defaultValue` prop instead.
`defaultValue`	any	—	The uncontrolled value of the radio button that should be initially selected. To render a controlled radio group, use the `value` prop instead.
`onValueChange`	(value: any, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element; }) => void	—	Callback fired when the value changes.
`inputRef`	enum	—	A ref to access the hidden input element.
`className`	enum	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
`style`	enum	—	Style applied to the element, or a function that returns a style object based on the component’s state.
`render`	enum	—	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.

RadioGroupItem

Prop	Type	Default	Description
`className`	enum	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
`style`	enum	—	Style applied to the element, or a function that returns a style object based on the component’s state.
`value*`	any	—	The unique identifying value of the radio in a group.
`render`	enum	—	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.
`disabled`	enum	—	Whether the component should ignore user interaction.
`required`	enum	—	Whether the user must choose a value before submitting a form.
`readOnly`	enum	—	Whether the user should be unable to select the radio button.
`inputRef`	enum	—	A ref to access the hidden input element.
`nativeButton`	enum	`false`	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.
`size`	enum	—	—