Rich Radio #

The rich radio is intended to be used as a replacement for the standard HTML radio input. It is a more flexible and customizable component that can be used to create a variety of different radio button styles.

Preview & Playground 🖼️ #

Here you may find a preview of the component, with error & possible variants.

<script setup lang="ts">
import { RichRadio } from '@flavorly/vanilla-components'
import { ref } from 'vue'
const value = ref('vps1')
const value2 = ref('vps1')
const value3 = ref('vps1')

const options = [
    { value: 'vps1', text: 'VPS X €99', description: 'You can add more information here' },
    { value: 'vps2', text: 'VPS T €39', description: 'You can add more information here' },
    { value: 'vps3', text: 'VPS L €29', description: 'Currently out of stock folks.', disabled: true },
]

const options2 = [
  { value: 'vps1', text: 'Dedicated J €99', description: 'You can add more information here' },
  { value: 'vps2', text: 'Dedicated T €39', description: 'You can add more information here' },
  { value: 'vps3', text: 'Dedicated L €29', description: 'Currently out of stock folks.', disabled: true },
]

const options3 = [
  { value: 'vps1', text: 'Dedicated J €99', description: 'You can add more information here', image: 'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80' },
  { value: 'vps2', text: 'Dedicated T €39', description: 'You can add more information here', image: 'https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80' },
  { value: 'vps3', text: 'Dedicated L €29', description: 'Currently out of stock folks.', disabled: true, image: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80' },
]
</script>

<template>
  <PreviewWrapper>
    <div class="space-y-2">
      <!-- Regular -->
      <div class="w-full">
        <RichRadio
          v-model="value"
          :options="options"
          feedback="Im useful helper out here, choose wisely"
        />
      </div>

      <!-- With Errors -->
      <div class="w-full">
        <RichRadio
          v-model="value2"
          :options="options2"
          errors="Sorry but you cannot purchase this at this time."
        />
      </div>

      <!-- With Slots -->
      <div class="w-full">
        <RichRadio
          v-model="value3"
          :options="options3"
        >
          <template #labelText="{ option }">
            <div class="inline-flex space-x-2">
              <img
                :src="option?.raw?.image"
                class="rounded-full h-5 w-5 shadow"
              >
              <span>{{ option?.text }}</span>
            </div>
          </template>
        </RichRadio>
      </div>
    </div>
  </PreviewWrapper>
</template>

Props 📥 #

Props available for this component extending the default variant & global props.

Options #

When using the options prop you can pass an array of objects of your choice and use the valueAttribute and textAttribute props to define which keys to use for the value and text. This will make it easier to use the component with your own data without worry about the structure. Internally we will convert the options to what we call normalizedOptions, that contains a value, text & description.

If you want instead, you can also pass the normalizeOptions prop with the array of normalized options with the following structure :

[
  {
    value: 'batman',
    text: 'Batman',
    description: 'The Dark Knight',
    disabled: false,
  },
]

By default, the select component will take the value to the v-modeland the text to the display the result label. You can disable an option by using the disabled key.

Slots 🧬 #

Current slots available for this component are the following:

By default all slots get all the props and configuration from the component, for option slots you always get the normalizedOption that contains the raw option. Option slots also gets the index, active, checked that are forwarded to all slots.

Slot option #

The Rich Radio component doesn't do much itself, the slot option contains all the logic for manipulating the styles, by default we will provide a RichRadioOption component that you can use. But feel free to create your own component and use it instead. Here is the scope passed to the option.

Slot radioIcon #

The slot radioIcon is used to replace the default radio icon with your own custom icon.

Slot label #

The slot label is used to replace the whole label with your own custom label, keep in mind it will also remove the default styling

Slot labelText #

The slot labelText is used to override the default label text while keeping the default styling, you can use this slot to add images or other labels as a label.

Slot description #

The slot description is used to override the default description, keep in mind it will also remove the default styling

Slot descriptionText #

The slot descriptionText is used to override the default description text while keeping the default styling, you can use this slot to add images or other labels as a description.

Slot svgIcon #

The slot svgIcon is used to override the default svg icon when the option is checked.

Slot before #

Slot to override or pre-pend to the component before the component, ex: icon, etc.

Slot after #

Slot to override or append to the component before the component, ex: icon, etc.

Attributes specially injected to the after slot for some inputs ( Ex: Password )

Slot errors #

Slot that holds the error messages when the component errors prop is defined.

Slot feedback #

Slot that holds the feedback messages when the component feedback prop is defined. When showing errors the feedback will be hidden by default, and vice-versa.

Events 🚇 #

Here you may find the events emitted by this component.

Rich Radio Option #

As stated above, the rich select component doesn't do much itself, the option component is where most of the configuration & styling goes into place. The props for the rich radio option are obviously the same as provided as a scope for the Slot Option.