Radio Group

Group of radio buttons for single selection

Basic Usage

Default

Comfortable

Compact

pnpm add @corew500/ui

import { RadioGroup } from "@corew500/ui/radio-group"

<RadioGroup>Content</RadioGroup>

Axis	Values	Default
`size`	smdefaultlg	default

Axis	Values	Default
`size`	smdefaultlg	default

Axis	Values	Default
`size`	smdefaultlg	default

CMSPayload CMS Integration

This component supports CMS-driven content via @corew500/cms-payload.

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.

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.