Radiobox
Use the KRadiobox component to allow users to select a single option from a predefined set of mutually exclusive options.
Mutually Exclusive Options
// Using Label Prop
KRadiobox(v-model="radioModel" value="radio1" label="Standard Radiobox")
// Using Label Slot
KRadiobox(v-model="radioModel" value="radio2")
template(#label)
span.custom-colored-label Custom Colored Label
// Disabled State
KRadiobox(disabled value="radio3" label="Radiobox disabled")
Validation States
KRadiobox(v-model="validRadio" value="r1" :validation="validState" :validationText="validText") Option with validation text
KRadiobox(v-model="validRadio" value="r2" :validation="validState") Another option sharing the state
Configure the KRadiobox component using these attributes.
| Name | Type | Default | Description |
|---|
| modelValue (v-model) | any | - | Binding value for the selected radio button |
| value | string | - | The value of this specific radio button |
| label | string | - | Optional label text (can also use default slot) |
| disabled | boolean | false | Disables the radiobox |
| validation | 'success' | 'warning' | 'error' | null | null | Semantic validation state. |
| validationText | string | '' | message to display below the radiobox. |
Listen to these events emitted by the KRadiobox component.
| Name | Payload | Description |
|---|
| update:modelValue | any | Emitted when selected radio value changes (for v-model). |
| change | any | Emitted on user selection change. |