MazRadio

MazRadio is a standalone component

INFO

Before you have to import the global css files in your project, follow instructions in Getting Started

Basic usage

v-model="undefined"

primary

secondary

info

success

warning

danger

white

black

View code

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

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

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

  const colors: Color[] = [
    'primary',
    'secondary',
    'info',
    'success',
    'warning',
    'danger',
    'white',
    'black',
  ]
</script>

Sizing

v-model="undefined"

mini

xs

sm

md

lg

xl

View code

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

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

  const chosenSize = ref('mini')

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

Disabled

disabled

disabled & selected

Props, Event & Slots

Props

Prop name	Description	Type	Values	Default
style	Style attribut of the component root element	TSIndexedAccessType	-	undefined
class	Class attribut of the component root element	TSIndexedAccessType	-	undefined
id	The id of the radio	string	-	undefined
modelValue	@model The value of the radio	T	-	undefined
value	The value of the radio	T	-
name	The name of the radio	string	-
label	The label of the radio	string	-	undefined
color	The color of the radio	Color	-	'primary'
size	The size of the radio	Size	-	'md'
disabled	The disabled state of the radio	boolean	-	false
error	Whether there is an error with the input.	boolean	-
success	Whether the input is successful.	boolean	-
warning	Whether there is a warning with the input.	boolean	-
hint	The hint text to display below the input.	string	-

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