Skip to content
On this page

Radio

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

Selected: true
html
<template>
  <KRadio name="test" :selected-value="true" v-model="radio">Boolean</KRadio>
  <KRadio name="test" selected-value="string" v-model="radio">String</KRadio>
  <KRadio name="test" :selected-value="objA" v-model="radio">Object A</KRadio>
  <KRadio name="test" :selected-value="objB" v-model="radio">Object B</KRadio>
  <div class="mt-3">Selected: {{ radio }}</div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'

export default defineComponent({
  setup() {
    const data = reactive({
      objA: { name: 'a' },
      objB: { name: 'b' },
      radio: true,
    })

    return {
      ...toRefs(data),
    }
  }
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

Props

v-model - required

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

label

Will place label text to the right of the radio. Can also be slotted.

html
<KRadio :selected-value="true" v-model="radio" label="Label Example" />
1

description

Will place description text under the radio label (required). Can also be slotted.

html
<KRadio :selected-value="true" v-model="radio" label="Label Example" description="Some subheader text" />
1

selectedValue

The value of the KRadio option that will be emitted by the change and update:modelValue events.

HTML attributes

Any valid attribute will be added to the input. You can read more about $attrs here.

html
<KRadio v-model="checked" :selected-value="true" disabled>Disabled radio</KRadio>
1

Slots

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

Events

KRadio has a couple of natural event bindings that all emit the same data when a radio option is selected.

  • change - Fired on change, returns the checked status of the radio.
  • update:modelValue - Fired on change, returns the checked status of the radio.

Theming

VariablePurpose
--KRadioPrimaryRadio primary background & border color
--KRadioDisabledRadio disabled background color

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

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

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

<style>
.KRadio-wrapper {
  --KRadioPrimary: lime;
}
</style>
1
2
3
4
5
6
7
8
9
10
11

Released under the Apache-2.0 License.