KongponentsRadio
KRadio - KRadio is a wrapper around a Kong styled radio input.
<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>
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.
<KRadio :selected-value="true" v-model="radio" label="Label Example" />
description
Will place description text under the radio label. Can also be slotted.
<KRadio
:selected-value="true"
v-model="radio"
label="Label Example"
description="Some subheader text"
/>
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.
<template>
<KRadio type="card" selected-value="foo" v-model="cardRadio">
<img class="mb-2" 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 class="mb-2" 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 class="mt-3">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>
HTML attributes
Any valid attribute will be added to the input. You can read more about $attrs here.
<KRadio v-model="checked" :selected-value="true" disabled>
Disabled radio
</KRadio>
Slots
default- Anything passed in to the default slot will replace thelabelprop text.
<KRadio
label="This will be replaced with a slot"
v-model="isStateOn"
:selected-value="true"
>
Label goes here. The radio is {{ isStateOn ? "selected" : "not selected" }}
</KRadio>
description- Anything passed in to this slot will replace thedescriptionprop text.
<KRadio
v-model="isStateOn"
description="This will be replaced with a slot"
label="Some label"
:selected-value="true"
>
<template #description>Description goes here</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
| Variable | Purpose |
|---|---|
--KRadioPrimary | Radio primary background & border color |
--KRadioDisabled | Radio 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
<template>
<div class="KRadio-wrapper">
<KRadio v-model="isStateOn" :selected-value="true" />
</div>
</template>
<style>
.KRadio-wrapper {
--KRadioPrimary: lime;
}
</style>