Custom Radio

If you're looking for more appealing and sophisticated designs for your forms, you can use our ERadioCustom to deliver a combination of beauty and utility. Demo Here

Usage

<template>
  <ERadioCustom
      :contents="radioContents"
      v-model="selectedValue"
  />
</template>

<script setup>
  const radioContents = ref([
    {
      title: "Graphic design",
      value: "g-design",  // if not defined, the index of item will be used.
    },
    {
      title: "Web design",
      value: "d-design",  // if not defined, the index of item will be used.
    },
  ]);
  const selectedValue = ref();
</script>

NOTE

To display the ‍ERadioCustom‍ element, the title property must be present. All other attributes are optional.

with icon

  const contents = [{
  title: "Graphic Design",
  value: "g-design",
  description: "Innovate. Inspire. Impact.",
  icon: {
      name: "Global",
      iconPack: "iconsax",
      size: 30,
      color: "#ABAFE6",
      type: "bulk",
  }
}];

with image

  const contents = [{
  title: "Graphic Design",
  value: "g-design",
  description: "Innovate. Inspire. Impact.",
  img: {
      src: "/graphic.jpg",
      alt: "graphic design",
      class: "",
  }
}];

Props

For ERadioCustom component, the following props are available:

Prop	Type	Default	Note
contents	Array	-	Radio content.
label	String	-	Component's label
actionButton	Boolean	false	Displays the radio button.
modelValue	[Number, String]	-	Active state.
width	String	-	Sets the component's width.
height	String	-	Sets the component's height.
vertical	Boolean	false	It organizes your radio vertically.
disabled	Boolean	false	Disables the ERadioCustom content.
tickBadge	Boolean	false	Displays a tick mark if the state if true.
validateOn	String	"input"	Triggers validation on @values: submit, input.
name	String	-	HTML name attribute..
grow	Boolean	false	Makes the radio expand to fit the full container width.
wrapperClasses	String	-	Overrides or extends the radio wrappers styles.
rules	Array	-	Validation rules. For more info refer to Form Validation.
size	String	"md"	The ERadioCustom element has three predefined sizes: sm, md, lg.
align	String	"start"	Specifies how the radio buttons are distributed along the cross axis in a container.
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.
square	Boolean	false	Removes rounded corners of the element.

Emits

The ERadioCustom component contains following emits.

Emit	Description
update:modelValue	Controls the modelValue of the element.

Related Pages

• Radio