GkRadioGroup & GkRadio

GkRadioGroup provides a shared name and v-model for GkRadio children, with optional group disabled / readonly (aligned with GkCheckbox / GkInput patterns). Use ariaLabel on the group when there is no visible group heading.

When to use

Use radios when users must choose exactly one option from a small, mutually exclusive set.

Live Examples

Basic

GkRadioGroup owns v-model; children declare value.

Light Dark

vue

<script setup lang="ts">
import { GkRadio, GkRadioGroup } from 'god-kit/vue'
import { ref } from 'vue'

const theme = ref<'light' | 'dark'>('light')
</script>

<template>
  <GkRadioGroup v-model="theme" aria-label="Theme">
    <GkRadio value="light">
      Light
    </GkRadio>
    <GkRadio value="dark">
      Dark
    </GkRadio>
  </GkRadioGroup>
</template>

Best practice: Give the group an aria-label or visible heading for context.

Disabled group

Pass disabled on the group to lock every option.

Disable group

Light Dark

vue

<script setup lang="ts">
import { GkRadio, GkRadioGroup } from 'god-kit/vue'
import { ref } from 'vue'

const theme = ref<'light' | 'dark'>('light')
const saving = ref(false)
</script>

<template>
  <div class="gk-doc-stack">
    <label class="gk-doc-inline">
      <input v-model="saving" type="checkbox" />
      <span>Disable group</span>
    </label>
    <GkRadioGroup
      v-model="theme"
      aria-label="Theme"
      :disabled="saving"
    >
      <GkRadio value="light">
        Light
      </GkRadio>
      <GkRadio value="dark">
        Dark
      </GkRadio>
    </GkRadioGroup>
  </div>
</template>

<style scoped>
.gk-doc-stack {
  display: flex;
  flex-direction: column;
  gap: var(--gk-space-3);
  max-width: 20rem;
}

.gk-doc-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--gk-space-2);
  font-size: var(--gk-font-size-sm);
  color: var(--gk-color-on-surface-muted);
}
</style>

Readonly review

Readonly prevents changing the selection while preserving announced values.

Light Dark

vue

<script setup lang="ts">
import { GkRadio, GkRadioGroup } from 'god-kit/vue'
import { ref } from 'vue'

const theme = ref<'light' | 'dark'>('light')
</script>

<template>
  <GkRadioGroup
    v-model="theme"
    readonly
    aria-label="Theme readonly review"
  >
    <GkRadio value="light">
      Light
    </GkRadio>
    <GkRadio value="dark">
      Dark
    </GkRadio>
  </GkRadioGroup>
</template>

API

GkRadioGroup props

Prop	Type	Default	Description
modelValue	string | number | undefined	—	Selected value (v-model)
name	string	—	Optional; defaults to a stable generated name
ariaLabel	string	—	Accessible name for the radiogroup
disabled	boolean	false	Disables all radios (each radio can still set disabled)
readonly	boolean	false	Prevents changing the selection; aria-readonly on the group

Root class applies to the group container; other attributes are forwarded to the radiogroup wrapper.

GkRadio props

Prop	Type	Default	Description
value	string | number	required	Value when this option is selected
disabled	boolean	false	Disables this option (combined with group disabled)
size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	—	Scales the radio and label typography; omit for global defaults

Events (GkRadioGroup)

Event	Payload	Description
update:modelValue	string | number | undefined	New selection

Events (GkRadio)

Event	Payload	Description
update:focused	boolean	Focus on the native radio

Expose (GkRadio)

Name	Type	Description
input	HTMLInputElement	Native radio

GK_RADIO_GROUP

Injected context includes isDisabled and isReadonly for the group. See Composables and GkRadioGroupContext in the package types.

Examples

Each scenario under Live Examples includes a copyable Vue snippet.

Accessibility notes

• Provide a group-level label (ariaLabel or visible heading) so assistive tech can announce context.
• Use radios only when one and only one option can be selected.

Related components

• GkCheckbox
• GkSelect
• GkField