MazRadio

MazRadio is a radio input with a label, colors and sizes to pick one value among several options; see MazRadioButtons for a ready-made group

Before use it, you should install the MazUi plugin in your project, follow instructions in Getting Started

Basic usage

v-model="undefined"

primary

secondary

info

success

warning

destructive

accent

contrast

View code

<script lang="ts" setup>
import MazRadio from 'maz-ui/components/MazRadio'
import { ref } from 'vue'

const chosenColor = ref('primary')
const chosenSize = ref('mini')

const colors: Color[] = [
  'primary',
  'secondary',
  'info',
  'success',
  'warning',
  'destructive',
  'accent',
  'contrast',
]
</script>

<template>
  <MazRadio
    v-for="color in colors"
    :key="color"
    v-model="chosenColor"
    name="chosenColor"
    :color="color"
    :value="color"
  >
    {{ color }}
  </MazRadio>
</template>

Sizing

v-model="undefined"

mini

xs

sm

md

lg

xl

View code

<script lang="ts" setup>
import MazRadio from 'maz-ui/components/MazRadio'
import type { Size } from 'maz-ui/components'
import { ref } from 'vue'

const chosenSize = ref('mini')

const sizes: Size[] = ['mini', 'xs', 'sm', 'md', 'lg', 'xl']
</script>

<template>
  <MazRadio
    v-for="size in sizes"
    :key="size"
    v-model="chosenSize"
    name="chosenSize"
    :size="size"
    :value="size"
    :label="size"
  />
</template>

Disabled

disabled

disabled & selected

Props

Name	Description	Type	Required	Default	Possible values
id	The id of the radio	string	No	-	-
model-value	v-model The value of the radio	T	No	-	-
value	The value of the radio	T	Yes	-	-
name	The name of the radio	string	Yes	-	-
label	The label of the radio	string	No	-	-
color	The color of the radio	"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"	No	"primary"	'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'destructive' | 'contrast' | 'transparent'
size	The size of the radio	"xs" | "sm" | "md" | "lg" | "xl" | "mini"	No	-	'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'mini'
disabled	The disabled state of the radio	boolean	No	false	-
error	Whether there is an error with the input.	boolean	No	-	-
success	Whether the input is successful.	boolean	No	-	-
warning	Whether there is a warning with the input.	boolean	No	-	-
hint	The hint text to display below the input.	string	No	-	-

Events

Event name	Payload	Description
update:model-value	value: T	Event emitted when value change
blur	value: FocusEvent	Emitted when the radio lost focus
change	value: T	Event emitted when value change
focus	value: FocusEvent	Emitted when the radio is focused

Slots

Name	Description	Bindings
default		isSelected boolean value T