Skip to content


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


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

Basic usage

Select a competition

Custom slot template

Select a competition

Orientation - Column

Select a competition

Selector icon with options equal-size

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



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, Event & Slots


Prop nameDescriptionTypeValuesDefault
@model The value of the selected option
optionsThe options to displayArray-
nameThe name of the radio groupstring-'MazButtonsRadio'
colorThe color of the selected radio buttonsColor-'primary'
elevationAdd elevation to the radio buttonsboolean-false
orientationThe orientation of the radio buttons
@values 'row' | 'col'
noWrapDisable the wrap of the radio buttonsboolean-false
equalSizeMake all radio buttons the same sizeboolean-false
selectorDisplay a selector iconboolean-false
blockThe component will be displayed in full widthboolean-false


Event namePropertiesDescription
update:model-valuevalue mixed - The value of the selected optionEmitted when the selected option change
changevalue mixed - The value of the selected optionEmitted when the selected option change


defaultLabel of the radiooption string | number | boolean - The value of the option
selected Boolean - If the option is selected