# Radio

KRadio - KRadio is a wrapper around a Kong styled radio input.

Selected: true
  <KRadio name="test" :value="true" v-model="radio">Boolean</KRadio>
  <KRadio name="test" value="string" v-model="radio">String</KRadio>
  <KRadio name="test" :value="objA" v-model="radio">Object A</KRadio>
  <KRadio name="test" :value="objB" v-model="radio">Object B</KRadio>

export default {
  data() {
    return {
      objA: { name: 'a' },
      objB: { name: 'b' },
      radio: true,

# Props

# v-model - required

Use v-model to bind the checked state of the underlying <input />. The v-model binds to the value prop of the component and sets current checked state of the input. You can read more about passing values via v-model here (opens new window).

# html attributes

Any valid attribute will be added to the input. You can read more about $attrs here (opens new window).

  {{ label="disabled" }}

# Slots

  • default - Anything passed in to the default slot will replace the label prop text
<KRadio v-model="selected" :value="true">
  Label goes here. The radio is {{ selected ? 'selected' : 'not selected' }}

# Theming

Variable Purpose
--KRadioPrimary Radio primary background & border color
--KRadioDisabled Radio disabled background color

An Example of changing the background color of KRadio to mediumpurple might look like:

Note: We are scoping the overrides to a wrapper in this example

  <div class="KRadio-wrapper">
    <KRadio v-model="selected" :value="true" />

.KRadio-wrapper {
  --KRadioPrimary: lime;