VInputRadio

The VInputRadio component is a radio button input element that can be used within a form.

My radio button

<VInputRadio v-model="radio" name="radio" label="My radio button" />
/>

Bottom section

The VInputRadio contain a bottom section that add the content of description prop or content from the bottom slot.

Here an example using the description prop

My radio button

Click on me

<VInputRadio v-model="radio" name="radio" label="My radio button" description="Click on me" />

Here an example using the bottom slot

My radio button

Bottom slot 😎

<VInputRadio v-model="radio" name="radio" label="My radio button">
  <template #bottom>
      Bottom slot 😎
  </template>
</VInputRadio>

Preset customization

The VInputRadio preset configuration interface extends the DefaultConfig interface, which is explained in detail here.

SelectConfig

export interface InputRadioConfig extends DefaultConfig {
  // Wrapper for <input> and <label>
  wrapper: {
    class: MethodOrStringType, // style classes of wrapper
    input: {
      class: MethodOrStringType, // style classes of input element
      variants?: VariantsConfig, // Contain all variants key / value
      variant?: MethodOrStringType,
      sizes?: MethodOrObject, // Contain all sizes key / value
      size?: MethodOrStringType,
    },
    label: {
      class: MethodOrStringType // style classes of label
    },
  }
  // Buttom content of InputRadio
  bottom: {
    class: MethodOrStringType // style classes of bottom
  }
}

Here the exemple from the default InputRadio.config.ts vunix preset which is built on top of Tailwind CSS.

InputRadio.config.ts

const config = {
  class: 'flex flex-col',
  wrapper: {
    class: 'flex items-center font-medium',
    input: {
      class: 'grid place-content-center appearance-none shrink-0 after:transition-transform after:duration-100 after:ease-in-out',
      variants: {
        default: `min-h-[10px] min-w-[10px] w-5 h-5 focus:outline-none border-2 rounded-full after:bg-[CanvasText] border-gray-300 dark:border-white focus:border-blue-400 after:content-[''] after:w-[10px] after:h-[10px] after:rounded-lg after:scale-0 checked:after:scale-100 after:shadow-[inset_1em_1em_#2563EB]`,
      }
    },
    label: {
      class: 'pl-2 text-gray-900 dark:text-gray-100 text-sm',
    }
  },
  bottom: {
    class: 'text-gray-500 dark:text-gray-400 ml-7 text-xs'
  }
} as InputRadioConfig;

Edit this page on GitHub

FormVInputCheckbox

FormVSelect