Morpheme

Appearance

Radio Group ​

The VRadioGroup component is a form control that allows the user to select a single option from a list of choices presented as radio buttons.

Usage ​

Basic Usage ​

To use the VRadioGroup component, pass in a list of objects representing the available options through the items prop. Each object should have a text property for the label to be displayed and a value property for the underlying value of the option.

Inline ​

To display the radio buttons inline, set the inline prop to true.

Error ​

To display the VRadioGroup component in an error state, set the error prop to true. This will add an error message and apply an error styles to the component.

Disabled ​

To disable the VRadioGroup component and prevent user interaction, set the disabled prop to true.

Disabled ​

To disable the VRadioGroup component and prevent user interaction, set the disabled prop to true.

Validation ​

The VRadioGroup component can be used in a form with form validation by using a form handling library such as VeeValidate.

Here is an example of using the VRadioGroup component with VeeValidate:

Validation Mode ​

There are 2 modes. The first is eager mode, and the second is aggressive mode. The eager mode validates input when the blur event occurs. Meanwhile, aggressive mode validates the input every time the input itself changes. This can be useful when you are validating for example the minimum or maximum limits of an input.

You can change the default value for this validation mode by adding an attribute or property named validation-mode to this component.

:::

Styling selected item ​

To style selected item distinctively, pass your class to selectedClass prop, or defaultClass to set a default classes for the items.

vue
<script setup lang="ts">
import {ref} from 'vue';

const items = ref([
  {
    text: 'Item 1',
    value: 1,
  },
  {
    text: 'Item 2',
    value: 2,
  },
  {
    text: 'Item 3',
    value: 3,
  },
]);
</script>

<template>
  <VRadioGroup
    :items="items"
    label="Pick an option"
    labelClass="!text-purple-500"
    ,
    defaultClass="p-2 my-1 hover=bg-primary-50 border-grey-300 border rounded-lg cursor-pointer"
    ,
    selectedClass="!border-primary-300 !text-primary-500"
  />
</template>
<script setup lang="ts">
import {ref} from 'vue';

const items = ref([
  {
    text: 'Item 1',
    value: 1,
  },
  {
    text: 'Item 2',
    value: 2,
  },
  {
    text: 'Item 3',
    value: 3,
  },
]);
</script>

<template>
  <VRadioGroup
    :items="items"
    label="Pick an option"
    labelClass="!text-purple-500"
    ,
    defaultClass="p-2 my-1 hover=bg-primary-50 border-grey-300 border rounded-lg cursor-pointer"
    ,
    selectedClass="!border-primary-300 !text-primary-500"
  />
</template>

Props ​

NameTypeDefault
modelValue[String, Number, Object, Boolean] as PropType<Value>null
value[String, Number, Object, Boolean] as PropType<Value>null
labelString''
nameString''
errorBooleanfalse
errorMessagesArray[]
readonlyBooleanfalse
disabledBooleanfalse
itemsArray as PropType<RadioItem[]>[]
itemTextString'text'
itemValueString'value'
sizeString''
inlineBooleanfalse
hideErrorBooleanfalse
labelClassString''
errorClassString''
defaultClassString''
selectedClassString'text-error-600 text-sm mt-1'
rulesString''
idString''
validationMode'aggressive' | 'eager''aggressive'
hintString''
hideErrorBooleanfalse

Events ​

update:modelValue ​

This event is emitted whenever the value of the VRadioGroup component changes. It is emitted with the new value as the argument.

vue
<template>
  <VRadioGroup @update:modelValue="handleModelValueChange" />
</template>

<script>
export default {
  methods: {
    handleModelValueChange(newValue) {
      // handle value change
    },
  },
};
</script>
<template>
  <VRadioGroup @update:modelValue="handleModelValueChange" />
</template>

<script>
export default {
  methods: {
    handleModelValueChange(newValue) {
      // handle value change
    },
  },
};
</script>

change ​

This event is emitted whenever the value of the VRadioGroup component changes and the input loses focus. It is emitted with the new value as the argument.

vue
<template>
  <VRadioGroup @change="handleChange" />
</template>

<script>
export default {
  methods: {
    handleChange(newValue) {
      // handle change
    },
  },
};
</script>
<template>
  <VRadioGroup @change="handleChange" />
</template>

<script>
export default {
  methods: {
    handleChange(newValue) {
      // handle change
    },
  },
};
</script>

blur ​

This event is emitted whenever the VRadioGroup component loses focus. It is emitted with the current value as the argument.

vue
<template>
  <VRadioGroup @blur="handleBlur" />
</template>

<script>
export default {
  methods: {
    handleBlur(currentValue) {
      // handle blur
    },
  },
};
</script>
<template>
  <VRadioGroup @blur="handleBlur" />
</template>

<script>
export default {
  methods: {
    handleBlur(currentValue) {
      // handle blur
    },
  },
};
</script>

Slots ​

label ​

Customize radio label text

vue
<VRadioGroup>
  <template #label="{item, selected}">
    <span>{{ item.title }}</span>
  </template>
</VRadioGroup>
<VRadioGroup>
  <template #label="{item, selected}">
    <span>{{ item.title }}</span>
  </template>
</VRadioGroup>

CSS Variables ​

scss
:root {
  /* label */
  --v-radio-group-label-color: var(--v-input-label-color);
  --v-radio-group-label-font-size: var(--v-input-label-font-size);
  --v-radio-group-label-font-weight: var(--v-input-label-font-weight);
  --v-radio-group-label-display: var(--v-input-label-display);
  --v-radio-group-label-margin-bottom: var(--v-input-label-margin-bottom);

  // items text
  --v-radio-group-items-text-color: var(--color-gray-700);
  --v-radio-group-items-disabed-text-color: var(--color-gray-500);

  // hint
  --v-radio-group-hint-font-size: var(--v-input-hint-font-size, 14px);
  --v-radio-group-hint-color: var(--v-input-hint-color);
  --v-radio-group-hint-margin-top: var(--v-input-hint-margin-top);
}
:root {
  /* label */
  --v-radio-group-label-color: var(--v-input-label-color);
  --v-radio-group-label-font-size: var(--v-input-label-font-size);
  --v-radio-group-label-font-weight: var(--v-input-label-font-weight);
  --v-radio-group-label-display: var(--v-input-label-display);
  --v-radio-group-label-margin-bottom: var(--v-input-label-margin-bottom);

  // items text
  --v-radio-group-items-text-color: var(--color-gray-700);
  --v-radio-group-items-disabed-text-color: var(--color-gray-500);

  // hint
  --v-radio-group-hint-font-size: var(--v-input-hint-font-size, 14px);
  --v-radio-group-hint-color: var(--v-input-hint-color);
  --v-radio-group-hint-margin-top: var(--v-input-hint-margin-top);
}

Standalone Installation ​

You can also install the VRadioGroup component individually via @morpheme/forms package:

bash
npm i @morpheme/forms
npm i @morpheme/forms
vue
<script setup lang="ts">
import {VRadioGroup} from '@morpheme/forms';
</script>

<template>
  <VRadioGroup :items="items" />
</template>
<script setup lang="ts">
import {VRadioGroup} from '@morpheme/forms';
</script>

<template>
  <VRadioGroup :items="items" />
</template>

Storybook ​

View Storybook documentation here.