MazRadioButtons

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

Basic usage

vue

<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

html

<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="{ 'maz-text-muted': !selected }">
          {{ option.areaName }}
        </span>
      </div>
    </div>
  </template>
</MazRadioButtons>

Orientation - Column

vue

<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="{ 'maz-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.

vue

<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>

Props

Name	Description	Type	Required	Default	Possible values
model-value	`v-model`	`T`	No	`undefined`	-
options	The options to display	`Option[]`	Yes	`undefined`	-
name	The name of the radio group	`string`	No	`'MazButtonsRadio'`	-
color	The color of the selected radio buttons	`MazColor \| "background"`	No	`'primary'`	-
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	`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`	-
size	The size of the radio buttons	`MazSize`	No	`'md'`	-

Events

Event name	Properties	Description
update:model-value	value `mixed` - The value of the selected option	Emitted when the selected option change
change	value `mixed` - The value of the selected option	Emitted when the selected option change
blur	value `FocusEvent` - The focus event	Emitted when the a radio button lost focus
focus	value `FocusEvent` - The focus event	Emitted when the a radio button is focused

Slots

Name	Description	Bindings
default	Label of the radio	option `string \| number \| boolean` - The value of the option selected `Boolean` - If the option is selected

MazRadioButtons ​

Basic usage ​

Custom slot template ​

Orientation - Column ​

Selector icon with options equal-size ​