Examples, guidelines and scenarios are on the CdsRadioGroup page. For an independent on/off option take CdsCheckbox.

API

Props

Name	Type	Default	Description
activeColor	string | undefined	—	Color of the component in its active state
baseColor	string | undefined	—	Color of the component in its inactive state
bgColor	string | undefined	—	Background color of the component
color	string | undefined	—	Component color
defaultsTarget	string | undefined	—	Name of the child component the group prop values are passed to as defaults
description	string | undefined	—	Description of the component, shown under the label
direction	"horizontal" | "vertical" | undefined	'horizontal'	Switches the component between horizontal and vertical layout.
disabled	boolean | null | undefined	null	Disabled state
error	boolean | undefined	—	Puts the component into the visual error state
falseIcon	IconValue | undefined	'radio-off'	Icon of the unselected state
falseValue	any	—	Value for the false state.
id	string | undefined	—	Unique identifier of the component
inline	boolean | undefined	—	Renders the control as an inline element — the container does not stretch to the full width
label	string | undefined	—	Label text of the component
modelValue	any	—	Value of the component (v-model). In a group it is the value of the selected control, with multiple — an array of the selected values
multiple	boolean | null | undefined	null	Allows selecting several values — the model becomes an array. Turns on automatically when an array is passed to modelValue
name	string | undefined	—	The name attribute of the native input element. In a group one name joins all the nested controls
readonly	boolean | null | undefined	null	Read-only state
textColor	string | undefined	—	Text color of the component
theme	string | undefined	—	Component theme
trueIcon	IconValue | undefined	'radio-on'	Icon of the selected state
trueValue	any	—	Value for the true state.
type	string | undefined	—	Type of the native input element — radio or checkbox, for example
value	any	—	Value used when the component is selected inside a group. When it is not set, a unique identifier is used.
valueComparator	ValueComparator | undefined	true	Function comparing the model value with the value of the control. Deep comparison by default

Slots

Name	Type	Description
default	{ backgroundColorClasses: Ref<string[], string[]>; backgroundColorStyles: Ref<CSSProperties, CSSProperties>; }	Default slot
description	{ description: string | undefined; props: Record<string, any>; }	Default slot of the CdsDescription component
input	SelectionControlSlot	Slot for the default input element.
label	{ label: string | undefined; props: Record<string, any>; }	Default slot of the CdsLabel component