MazRadio

MazRadio is a standalone component

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
style	Style attribut of the component root element	Native type	No	undefined
class	Class attribut of the component root element	Native type	No	undefined
id	The id of the radio	string	No	undefined
model-value	v-model	T	No	undefined
value	The value of the radio	T	Yes	undefined
name	The name of the radio	string	Yes	undefined
label	The label of the radio	string	No	undefined
color	The color of the radio	MazColor	No	'primary'
size	The size of the radio	MazSize	No	'md'
disabled	The disabled state of the radio	boolean	No	false
error	Whether there is an error with the input.	boolean	No	undefined
success	Whether the input is successful.	boolean	No	undefined
warning	Whether there is a warning with the input.	boolean	No	undefined
hint	The hint text to display below the input.	string	No	undefined

Events

Event name	Properties	Description
update:model-value	value string | number | boolean - selected value	Event emitted when value change
change	value string | number | boolean - selected value	Event emitted when value change
blur	value FocusEvent - The focus event	Emitted when the radio lost focus
focus	value FocusEvent - The focus event	Emitted when the radio is focused

Slots

Name	Description	Bindings
default