Radio

Radio picks one value in a group. Selected state is a white fill, a deep-gold ring, and a deep-gold center dot — not a solid yellow disc.

Demos

Basic

Bind group value and listen for change with e.detail.value. Arrow keys move and select, skipping disabled radios.

ApplePearPlum

Value: pear

<gk-radio-group :value="fruit" @change="onFruit">
  <gk-radio value="apple">Apple</gk-radio>
  <gk-radio value="pear">Pear</gk-radio>
  <gk-radio value="plum">Plum</gk-radio>
</gk-radio-group>

Size

Size enum matches other controls: sm, md, lg.

SmallMediumLarge

<gk-radio-group size="sm" value="a">
  <gk-radio value="a">Small</gk-radio>
</gk-radio-group>
<gk-radio-group size="md" value="a">
  <gk-radio value="a">Medium</gk-radio>
</gk-radio-group>
<gk-radio-group size="lg" value="a">
  <gk-radio value="a">Large</gk-radio>
</gk-radio-group>

Disabled

Group disabled blocks selection.

SelectedOther

<gk-radio-group disabled value="a">
  <gk-radio value="a">Selected</gk-radio>
  <gk-radio value="b">Other</gk-radio>
</gk-radio-group>

API

Radio Props

Prop	Type	Default
checked	boolean	false
disabled	boolean	false
size	'sm' | 'md' | 'lg'	'md'
value	string	''

RadioGroup Props

Prop	Type	Default
value	string	''
disabled	boolean	false
size	'sm' | 'md' | 'lg'	'md'

RadioGroup Events

Name	Description
change	detail: { value: string }