PubRadio

This is a radio component. It is used to display a radio field to select an option from a list of options.

Default Usage

Default radio

Checked state

<template>
  <pub-radio
    v-model="defPicked"
    name="default"
    label="Default radio"
    value="one"
  />
  <pub-radio
    v-model="defPicked"
    name="default"
    label="Checked state"
    value="two"
  />
</template>

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

const defPicked = ref('two')
</script>

Sizes

Prop - size Usage

The size prop is used to set the size of the radio button. It can be one of the following values: sm, md, lg, xl.

Small

Medium (default)

Large

Extra large

<template>
  <pub-radio
    v-model="sizePicked"
    name="size"
    label="Small"
    value="sm"
    size="sm"
  />
  <pub-radio
    v-model="sizePicked"
    name="size"
    label="Medium (default)"
    value="md"
    size="md"
  />
  <pub-radio
    v-model="sizePicked"
    name="size"
    label="Large"
    value="lg"
    size="lg"
  />
  <pub-radio
    v-model="sizePicked"
    name="size"
    label="Extra large"
    value="xl"
    size="xl"
  />
</template>

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

const sizePicked = ref('md')
</script>

Validation

Prop - validationStatus and Slot - validationMessage Usage

The validationStatus prop is used to set the visual validation state of the radio. It can be one of the following values: error, success.

The validationMessage slot is used to display a custom validation message. It can be a string value.

Disabled

Prop - disabled Usage

The disabled prop is used to disable the radio button.

Default radio

Checked state

<template>
  <pub-radio
    v-model="picked"
    name="disabled"
    label="Default radio"
    disabled
    value="one"
  />
  <pub-radio
    v-model="picked"
    name="disabled"
    label="Checked state"
    disabled
    value="two"
  />
</template>

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

const picked = ref('two')
</script>

Colors

Prop - color Usage

The color prop is used to set the color of the radio button. It can be one of the following values: red, yellow, green, blue, magenta, cyan, light, dark.

Red

Green

Blue

Yellow

Pink

Cyan

Purple

Black

Grey

<template>
  <pub-radio
    v-model="colorPicked"
    name="color"
    label="Red"
    value="red"
    color="red"
  />
  <pub-radio
    v-model="colorPicked"
    name="color"
    label="Green"
    value="green"
    color="green"
  />
  <pub-radio
    v-model="colorPicked"
    name="color"
    label="Blue"
    value="blue"
    color="blue"
  />
  <pub-radio
    v-model="colorPicked"
    name="color"
    label="Yellow"
    value="yellow"
    color="yellow"
  />
  <pub-radio
    v-model="colorPicked"
    name="color"
    label="Pink"
    value="pink"
    color="pink"
  />
  <pub-radio
    v-model="colorPicked"
    name="color"
    label="Cyan"
    value="cyan"
    color="cyan"
  />
  <pub-radio
    v-model="colorPicked"
    name="color"
    label="Purple"
    value="purple"
    color="purple"
  />
  <pub-radio
    v-model="colorPicked"
    name="color"
    label="Black"
    value="black"
    color="black"
  />
  <pub-radio
    v-model="colorPicked"
    name="color"
    label="Grey"
    value="grey"
    color="grey"
  />
</template>

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

const colorPicked = ref('red')
</script>

Reference

Props

Name	Type	Default	Description	Options
name	String	''	The name of the radio button.
label	String	''	The label of the radio button.
value	String	''	The value of the radio button.
size	String	'md'	The size of the radio button.	'sm', 'md', 'lg', 'xl'
disabled	Boolean	false	Whether the radio button is disabled.
color	String	''	The color of the radio button.	'red', 'yellow', 'green', 'blue', 'pink', 'cyan', 'purple', 'grey','black'
validationStatus	String	undefined	Visual validation state of the input.	'Error', 'Success'
class	String	''	Additional CSS classes to apply.
wrapperClass	String	''	Additional CSS classes to apply to the wrapper element.
labelClass	String	''	Additional CSS classes to apply to the label element.
bordered	Boolean	false	Whether the radio button is bordered.

Slots

Name	Description
default	Default slot