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