Radio Group

Radio groups let users choose one option from a small set of mutually exclusive values.

Basic Usage

Keep radio options in a group so keyboard navigation and value selection remain mutually exclusive.

Supporting Descriptions

When the choice affects behavior, add a short supporting line so the options can stand on their own without extra nearby copy.

Disabled Options

Disable individual options when the broader choice is valid but one route is unavailable in the current context.

Layout and Error

Use horizontal layout for compact choices, and apply invalid state to the group when validation fails.

API

RadioGroup

Slots

Name	Description
label	Group label
instructions	Instructions text
hint	Alias for instructions
(default)	pk-radio items

Props

Name	Description
ariaLabel	Type string | null Default null
customError	Custom validation message; also settable via setCustomValidity(). Type string | null Default null
defaultValue	Default value — reflected as the value attribute. Type string
disabled	Disables the control and excludes it from constraint validation. Type boolean Default false
instructions	Type string
invalid	Type boolean Default false
isInvalid	Alias for invalid.
label	Type string
name	Name submitted with form data. Type string | null Default null
orientation	Type PkRadioGroupOrientation Default vertical
required	Marks the control as required for form submission. Type boolean Default false

Methods

Name	Description
checkValidity()	Runs constraint validation without showing the browser UI.
reportValidity()	Runs constraint validation and shows the browser UI when invalid.
resetValidity()	Clears custom errors and re-syncs validity state.
setCustomValidity(message: string)	Sets or clears a custom validation message.

Events

Name	Description
@change	—
@input	—
@pk-change	—

Custom States

Name	Description	CSS selector
disabled	The control is disabled.	:state(disabled)
invalid	The control currently fails constraint validation.	:state(invalid)
optional	The control is not required.	:state(optional)
required	The control is required.	:state(required)
user-invalid	Invalid after the user has interacted with the control.	:state(user-invalid)
user-valid	Valid after the user has interacted with the control.	:state(user-valid)
valid	The control currently passes constraint validation.	:state(valid)

CSS Parts

Name	Description	CSS selector
form-control	Form control wrapper	::part(form-control)
instructions	Instructions text	::part(instructions)
label	Label text	::part(label)
radios	Radio items container	::part(radios)

Radio

Slots

Name	Description
(default)	Visible label text

Props

Name	Description
ariaLabel	Type string | null Default null
checked	Type boolean Default false
disabled	Type boolean Default false
forceDisabled	Set by pk-radio-group when the group is disabled. Type boolean Default false
invalid	Type boolean Default false
isInvalid	Alias for invalid.
required	Type boolean Default false
tabIndex	Type number Default -1
value	Type string

Methods

Name	Description
focusControl(options: FocusOptions)	—

Events

Name	Description
@pk-radio-select	—

CSS Parts

Name	Description	CSS selector
base	Root label element	::part(base)
control	Visual radio circle	::part(control)
indicator	Indicator container	::part(indicator)
input	Native radio input	::part(input)