Skip to content

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

NameTypeDefault
modelValueString''
valueString''
labelString''
inputClassString''
colorString'primary'
nameString''
idString''
rulesString''
labelClassString''
wrapperClassString''
groupClassString''
hideErrorBooleanfalse
disabledBooleanfalse
disabledClassString'disabled:text-gray-200 disabled:cursor-not-allowed'
hintString''
hideErrorBooleanfalse

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:

ts
(event: 'update:modelValue', value: boolean): void
(event: 'update:modelValue', value: boolean): void

Example:

vue
<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

scss
: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:

bash
npm i @morpheme/forms
npm i @morpheme/forms
vue
<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.