Skip to content

Radio

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

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

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

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

    return {
      ...toRefs(data),
    }
  }
})
</script>

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.

selectedValue - required

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

label

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

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

description

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

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

type

Controls appearance of radio input element. Accepted values:

  • radio (default)
  • card

NOTE

The label and description props, as well as the description slot, are ignored when type prop is card.

You can only define content of a card via the default slot.

TIP

You can choose to utilize the .k-radio-label and .k-radio-description classes within the default slot as shown in the example below to leverage preconfigured styles.

Selected:
html
<template>
  <KRadio type="card" selected-value="foo" v-model="cardRadio">
    <img src="/img/kong-logo.png" alt="Kong logo" />
    <div class="k-radio-label">Foo</div>
    <div class="k-radio-description">This subheader</div>
  </KRadio>
  <KRadio type="card" selected-value="bar" v-model="cardRadio">
    <img src="/img/kong-logo.png" alt="Kong logo" />
    <div class="k-radio-label">Bar</div>
    <div class="k-radio-description">That subheader</div>
  </KRadio>
  <div>Selected: {{ cardRadio }}</div>
</template>

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

export default defineComponent({
  setup() {
    const data = reactive({
      cardRadio: "",
    });

    return {
      ...toRefs(data),
    }
  }
})
</script>

labelAttributes

KRadio has an instance of KLabel for supporting tooltip text. Use the labelAttributes prop to configure the KLabel's props. This example shows using the label-attributes to set up a tooltip, see the slot section if you want to slot HTML into the tooltip rather than use plain text.

html
<KRadio
  v-model="checked"
  label="Tooltips?"
  :label-attributes="{ help: 'I use the KLabel `help` prop' }"
  :selected-value="true"
/>

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>

Slots

  • default - Anything passed in to the default slot will replace the label prop text.
html
<KRadio
  v-model="checked"
  label="This will be replaced with a slot"
  :selected-value="true"
>
  Label goes here. The radio is {{ checked ? "selected" : "not selected" }}
</KRadio>
  • description - Anything passed in to this slot will replace the description prop text.
html
<KRadio
  v-model="checked"
  label="Some label"
  description="This will be replaced with a slot"
  :selected-value="true"
>
  <template #description>Description goes here</template>
</KRadio>
  • tooltip - Provides a slot for tooltip content displayed after the radio label
html
<KRadio v-model="checked" :selected-value="true">
  My tooltip
  <template #tooltip>Brings all the <code>devs</code> to the yard</template>
</KRadio>

Note:

When utilizing the tooltip slot, the info KIcon will be shown by default. To utilize the the help icon instead, set the label-attributes help property to any non-empty string value.

html
<KRadio
  v-model="checked"
  :label-attributes="{ help: 'true' }"
  :selected-value="true"
>
  My tooltip
  <template #tooltip>Brings all the <code>devs</code> to the yard</template>
</KRadio>

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="checked" :selected-value="true" />
  </div>
</template>

<style>
.KRadio-wrapper {
  --KRadioPrimary: lime;
}
</style>

Released under the Apache-2.0 License.