Radio
The VRadio
component is a form input element used to allow the user to select one option from a list of choices.
Usage
Basic Usage
To use the VRadio
component, you must first import it in your template:
INFO
The VRadio
component is registered globally when you install with @morpheme/ui
. So you don't need to import it manually.
Disabled
To disable the VRadio
component, you can pass the disabled
prop:
Validation
To validate the VRadio
component, you can use a form validation library such as vee-validate
.
Props
Name | Type | Default |
---|---|---|
modelValue | String | '' |
value | String | '' |
label | String | '' |
inputClass | String | '' |
color | String | 'primary' |
name | String | '' |
id | String | '' |
rules | String | '' |
labelClass | String | '' |
wrapperClass | String | '' |
groupClass | String | '' |
hideError | Boolean | false |
disabled | Boolean | false |
disabledClass | String | 'disabled:text-gray-200 disabled:cursor-not-allowed' |
hint | String | '' |
hideError | Boolean | false |
Events
update:modelValue
Emitted when the value of the v-model directive changes. Can be used to perform an action when the value changes, such as updating other data or displaying a message to the user.
Type:
(event: 'update:modelValue', value: boolean): void
(event: 'update:modelValue', value: boolean): void
Example:
<script setup lang="ts">
import {ref} from 'vue';
const selected = ref(false);
const onChange = (val: boolean) => {
console.log(val);
};
</script>
<template>
<VRadio v-model="selected" @update:modelValue="onChange" />
</template>
<script setup lang="ts">
import {ref} from 'vue';
const selected = ref(false);
const onChange = (val: boolean) => {
console.log(val);
};
</script>
<template>
<VRadio v-model="selected" @update:modelValue="onChange" />
</template>
Slots
None
CSS Variables
:root {
--v-radio-bg-color: var(--color-white);
--v-radio-border-color: var(--color-gray-300);
--v-radio-border-style: solid;
--v-radio-border-width: 1px;
--v-radio-bg-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%230984DD' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
// checked
--v-radio-checked-bg-color: var(--color-primary-50);
--v-radio-checked-border-color: var(--color-primary-600);
// disabled
--v-radio-disabled-border-color: var(--color-gray-400);
--v-radio-disabled-bg-color: var(--color-gray-300);
--v-radio-disabled-bg-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%2398A2B3' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
// label
--v-radio-label-color: var(--color-gray-700);
// hint
--v-radio-hint-font-size: var(--v-input-hint-font-size, 14px);
--v-radio-hint-color: var(--v-input-hint-color);
--v-radio-hint-margin-top: var(--v-input-hint-margin-top);
}
:root {
--v-radio-bg-color: var(--color-white);
--v-radio-border-color: var(--color-gray-300);
--v-radio-border-style: solid;
--v-radio-border-width: 1px;
--v-radio-bg-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%230984DD' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
// checked
--v-radio-checked-bg-color: var(--color-primary-50);
--v-radio-checked-border-color: var(--color-primary-600);
// disabled
--v-radio-disabled-border-color: var(--color-gray-400);
--v-radio-disabled-bg-color: var(--color-gray-300);
--v-radio-disabled-bg-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%2398A2B3' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
// label
--v-radio-label-color: var(--color-gray-700);
// hint
--v-radio-hint-font-size: var(--v-input-hint-font-size, 14px);
--v-radio-hint-color: var(--v-input-hint-color);
--v-radio-hint-margin-top: var(--v-input-hint-margin-top);
}
Standalone Installation
You can also install the Radio
component individually via @morpheme/forms
package:
npm i @morpheme/forms
npm i @morpheme/forms
<script setup lang="ts">
import {VRadio} from '@morpheme/forms';
import {ref} from 'vue';
const selected = ref(false);
</script>
<template>
<VRadio v-model="selected" />
</template>
<script setup lang="ts">
import {VRadio} from '@morpheme/forms';
import {ref} from 'vue';
const selected = ref(false);
</script>
<template>
<VRadio v-model="selected" />
</template>
Storybook
View Storybook documentation here.