Radio

The ERadio allow users to choose one option from a set. Demo Here

Usage

The ERadio and ERadioGroup components are used together as below:

<template>
  <ERadioGroup v-model="value">
    <ERadio>Radio 1</ERadio>
    <ERadio>Radio 2</ERadio>
    <ERadio>Radio 3</ERadio>
    <ERadio>Radio 4</ERadio>
  </ERadioGroup>
</template>

<script setup>
  const value = ref(0);
</script>

Props

For ERadioGroup component, the following props are available:

Prop	Type	Default	Note
modelValue	[String, Number]	-	Value of the selected radio button.
disabled	Boolean	false	Disables the radio buttons.
label	String	-	Component's label
message	String	-	Adds a message below the element.
vertical	Boolean	false	It organizes your radios vertically.
rules	Array	-	Validation rules. For more info refer to [Form Validation.
name	String	-	HTML name attribute.
validateOn	String	"input"	Triggers validation on @values: submit, input.
state	String	-	Validates the user-provided data against established criteria and performs display validation. States can be none if no validation is necessary, danger if the selected is valid, or success if it is acceptable.
size	String	"md"	The ERadioGroup element has three predefined sizes: sm, md, lg.
align	String	"start"	Specifies how the pagination buttons are distributed along the cross axis in a container.
color	String	"primary"	The given color is applied to the element - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.

For ERadio component, the following props are available:

Prop	Type	Default	Note
id	String	-	HTML id attribute.
disabled	Boolean	false	Disables the ERadio.
size	String	"md"	The ERadio element has three predefined sizes: sm, md, lg.
value	[String, Number]	false	You can Add your own value. If not, we will default to the index of the child position.
color	String	"primary"	The given color is applied to the element - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.
state	String	-	Validates the user-provided data against established criteria and performs display validation. States can be none if no validation is necessary, danger if the selected is valid, or success if it is acceptable.

Emits

The ERadioGroup component contains following emits.

Emit	Description
update:modelValue	Emitted when the local ref's value is mutated.