MazRadioButtons

MazRadioButtons is a standalone component to select a value in a list. Made with native HTMLInputElement type radio

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

Basic usage

Select a competition

Ligue 1Premier LeagueBundesligaEredivisieSerie APrimera DivisionPrimeira LigaUEFA Champions League

<template>
  <MazRadioButtons
    v-model="selectedCompetition"
    :options="competitions"
  />
</template>

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

  import MazRadioButtons from 'maz-ui/components/MazRadioButtons'

  const selectedCompetition = ref<string>()

  const competitions = [
    {
      value: "1",
      label: "Ligue 1",
      areaName: "France",
      areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/en/c/c3/Flag_of_France.svg",
    },
    {
      value: "2",
      label: "Premier League",
      areaName: "England",
      areaEnsignUrl: "https://crests.football-data.org/770.svg",
    },
    {
      value: "3",
      label: "Bundesliga",
      areaName: "Germany",
      areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/commons/b/ba/Flag_of_Germany.svg",
    },
    {
      value: "4",
      label: "Eredivisie",
      areaName: "Netherlands",
      areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/commons/2/20/Flag_of_the_Netherlands.svg",
    },
    {
      value: "5",
      label: "Serie A",
      areaName: "Italy",
      areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/en/0/03/Flag_of_Italy.svg",
    },
    {
      value: "6",
      label: "Primera Division",
      areaName: "Spain",
      areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/en/9/9a/Flag_of_Spain.svg",
    },
    {
      value: "7",
      label: "Primeira Liga",
      areaName: "Portugal",
      areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/commons/5/5c/Flag_of_Portugal.svg",
    },
    {
      value: "8",
      label: "UEFA Champions League",
      areaName: "Europe",
      areaEnsignUrl: "https://crests.football-data.org/EUR.svg",
    }
  ]
</script>

Custom slot template

Select a competition

Ligue 1France

Premier LeagueEngland

BundesligaGermany

EredivisieNetherlands

Serie AItaly

Primera DivisionSpain

Primeira LigaPortugal

UEFA Champions LeagueEurope

<MazRadioButtons
  v-model="selectedCompetition"
  :options="competitions"
  color="secondary"
>
  <template #default="{ option, selected }">
    <div style="display: flex;">
      <MazAvatar
        v-if="option.areaEnsignUrl"
        :src="option.areaEnsignUrl"
        style="margin-right: 16px;"
        size="0.8rem"
      />
      <div style="display: flex; flex-direction: column;">
        <span>
          {{ option.label }}
        </span>
        <span :class="{ 'text-muted': !selected }">
          {{ option.areaName }}
        </span>
      </div>
    </div>
  </template>
</MazRadioButtons>

Orientation - Column

Select a competition

Ligue 1France

Premier LeagueEngland

BundesligaGermany

EredivisieNetherlands

Serie AItaly

Primera DivisionSpain

Primeira LigaPortugal

UEFA Champions LeagueEurope

<template>
  <MazRadioButtons
    v-model="selectedCompetition"
    :options="competitions"
    orientation="col | row"
    v-slot="{ option, selected }"
  >
    <div style="display: flex;">
      <MazAvatar
        v-if="option.areaEnsignUrl"
        :src="option.areaEnsignUrl"
        style="margin-right: 16px;"
        size="0.8rem"
      />
      <div style="display: flex; flex-direction: column;">
        <span>
          {{ option.label }}
        </span>
        <span :class="{ 'text-muted': !selected }">
          {{ option.areaName }}
        </span>
      </div>
    </div>
  </MazRadioButtons>
</template>

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

  import { MazRadioButtons, MazAvatar } from 'maz-ui/components'

  const selectedCompetition = ref<string>()

  const competitions = [
    {
      value: "1",
      label: "Ligue 1",
      areaName: "France",
      areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/en/c/c3/Flag_of_France.svg",
    },
    {
      value: "2",
      label: "Premier League",
      areaName: "England",
      areaEnsignUrl: "https://crests.football-data.org/770.svg",
    },
    {
      value: "3",
      label: "Bundesliga",
      areaName: "Germany",
      areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/commons/b/ba/Flag_of_Germany.svg",
    },
    {
      value: "4",
      label: "Eredivisie",
      areaName: "Netherlands",
      areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/commons/2/20/Flag_of_the_Netherlands.svg",
    },
    {
      value: "5",
      label: "Serie A",
      areaName: "Italy",
      areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/en/0/03/Flag_of_Italy.svg",
    },
    {
      value: "6",
      label: "Primera Division",
      areaName: "Spain",
      areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/en/9/9a/Flag_of_Spain.svg",
    },
    {
      value: "7",
      label: "Primeira Liga",
      areaName: "Portugal",
      areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/commons/5/5c/Flag_of_Portugal.svg",
    },
    {
      value: "8",
      label: "UEFA Champions League",
      areaName: "Europe",
      areaEnsignUrl: "https://crests.football-data.org/EUR.svg",
    }
  ]
</script>

Selector icon with options equal-size

This option will display a select icon on the left of the label

Scores

Predict the score of matches. If you find the outcome of the match you win 5 points, if you get the perfect score you double your score!

Cotes

Predict with match odds. If you find the correct winner of the match you earn the points associated with the rating, if you have the perfect score you double your score.

<template>
  <MazRadioButtons
    v-slot="{ option, selected }"
    v-model="selectedMode"
    :options="modeOptions"
    selector
    equal-size
    block
  >
    <div class="flex flex-col items-start p-2">
      <h3 class="mb-2 text-xl font-semibold">
        {{ option.label }}
      </h3>
      <span :class="{ 'text-muted': !selected }">
        {{ option.description }}
      </span>
    </div>
  </MazRadioButtons>
</template>

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

  const selectedMode = ref('scores')

  const modeOptions: MazRadioButtonsOption[] = [
    {
      label: 'Scores',
      value: 'scores',
      description:
        'Predict the score of matches. If you find the outcome of the match you win 5 points, if you get the perfect score you double your score!',
      style: 'min-width: 250px;'
    },
    {
      label: 'Cotes',
      value: 'odds',
      description:
        'Predict with match odds. If you find the correct winner of the match you earn the points associated with the rating, if you have the perfect score you double your score.',
      style: 'min-width: 250px;'
    },
  ]
</script>

Types

options

The options prop is an array of ButtonsRadioOption type

export type ButtonsRadioOption = {
  /** The label of the option */
  label: string
  /** The value of the option */
  value: string | number | boolean
  /** The classes to apply to the option */
  classes?: any
  /** The style to apply to the option */
  style?: StyleValue
} & Record<string, unknown>

Accessibility

The root element is a radiogroup of native radio inputs: pass an aria-label (or aria-labelledby) to name it. The hint describes the group (aria-describedby) and error sets aria-invalid. The arrows move between the options natively.

When no name is provided, each instance gets a unique one, so two groups of the same page never share their radios.

Props

Name	Description	Type	Required	Default	Possible values
model-value	v-model The value of the selected option	T	No	-	-
options	The options to display	Option[]	Yes	-	-
name	The name of the radio group	string	No	a unique name per instance	-
color	The color of the selected radio buttons	"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent" | "surface"	No	"primary"	'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'destructive' | 'contrast' | 'transparent' | 'surface'
elevation	Add elevation to the radio buttons	boolean	No	false	-
orientation	The orientation of the radio buttons	"row" | "col"	No	"row"	'row' | 'col'
wrap	Disable the wrap of the radio buttons	boolean	No	true	-
equal-size	Make all radio buttons the same size	boolean	No	false	-
selector	Display a selector icon	boolean	No	false	-
block	The component will be displayed in full width	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	-	-
size	The size of the radio buttons	"xs" | "sm" | "md" | "lg" | "xl" | "mini"	No	'md'	'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'mini'

Events

Event name	Payload	Description
update:model-value	value: Option["value"]	Emitted when the selected option change
blur	value: FocusEvent	Emitted when the a radio button lost focus
change	value: Option["value"]	Emitted when the selected option change
focus	value: FocusEvent	Emitted when the a radio button is focused

Slots

Name	Description	Bindings
default	Label of the radio	option Option - The value of the option selected boolean - If the option is selected