Radio button

Radio button component are used when the user needs to select one option from a set.

This UI component is best used when there is enough space, since all the options are visible at once. If you need to save space, a better UI choice would be the Dropdown component, which only displays the selected option and the others are only visible on selection.

Usage

Use the label option to provide a label to the Radio button.

<script setup>
  import { MbscRadio, MbscRadioGroup } from '@mobiscroll/vue';
</script>

<template>
  <MbscRadioGroup>
    <MbscRadio label="Option 1" value="1" />
    <MbscRadio label="Option 2" value="2" />
    <MbscRadio label="Option 3" value="3" />
  </MbscRadioGroup>
</template>

Value binding

Use the v-model directive to create a two-way binding.

<script setup>
  import { ref } from 'vue';
  import { MbscRadio, MbscRadioGroup } from '@mobiscroll/vue';

  const radio = ref('1');
</script>

<template>
  <MbscRadioGroup v-model="radio">
    <MbscRadio label="Option 1" value="1" />
    <MbscRadio label="Option 2" value="2" />
    <MbscRadio label="Option 3" value="3" />
  </MbscRadioGroup>
  Radio value: {{ radio }}
</template>

Options

Explore the following API options that help you easily configure the Radio button component.

color

"light" | "dark" | "primary" | "secondary" | "success" | "danger" | "warning" | "info"

Specifies the predefined color of the radio button.

Default value: undefined

cssClass

string

Specifies a custom CSS class for the component.

Default value: undefined

description

string

Specifies the description text of the radio button.

Default value: undefined

disabled

boolean

Specifies the disabled state of the radio button.

Default value: false

id

string

Specifies the id of the radio button.

Default value: undefined

label

string

Specifies the label of the radio button.

Default value: undefined

name

string

Specifies the name of the radio button.

Default value: undefined

position

"start" | "end"

Sets the position of the radio button depending on the rtl option. When in left-to-right mode, 'start' will render the radio button to the left, and 'end' will render it to the right. In right-to-left mode, 'start' will render the radio button to the right, and 'end' will render it to the left.

Default value: 'end'

theme

string

Specifies the visual appearance of the component.

If it is 'auto' or undefined, the theme will automatically be chosen based on the platform. If custom themes are also present, they will take precedence over the built in themes, e.g. if there's an iOS based custom theme, it will be chosen on the iOS platform instead of the default iOS theme.

Supplied themes:

• 'ios' - iOS theme
• 'material' - Material theme
• 'windows' - Windows theme

It's possible to modify theme colors or create custom themes.

info

Make sure that the theme you set is included in the downloaded package.

Default value: undefined

themeVariant

"light" | "dark" | "auto"

Controls which variant of the theme will be used (light or dark).

Possible values:

• 'light' - Use the light variant of the theme.
• 'dark' - Use the dark variant of the theme.
• 'auto' or undefined - Detect the preferred system theme on devices where this is supported.

To use the option with custom themes, make sure to create two custom themes, where the dark version has the same name as the light one, suffixed with '-dark', e.g.: 'my-theme' and 'my-theme-dark'.

Default value: undefined

Events

The Radio button component ships with different event hooks for deep customization. Events are triggered through the lifecycle of the component where you can tie in custom functionality and code.

@destroy

(args: any, inst: any) => void

Triggered when the component is destroyed.

Parameters:

• args - The event argument object.

• inst - The component instance.

@init

(args: any, inst: any) => void

Triggered when the component is initialized.

Parameters:

• args - The event argument object.

• inst - The component instance.

Localization

The Radio button component is fully localized. This covers date and time format, button copy, rtl and more.

locale

MbscLocale

Sets the language of the component. The locale object contains all the translations for a given language. The built in language modules are listed below. If a language is not listed, it can be provided as a custom language module.

Supported values:

• Arabic: localeAr, 'ar'
• Bulgarian: localeBg, 'bg'
• Catalan: localeCa, 'ca'
• Czech: localeCs, 'cs'
• Chinese: localeZh, 'zh'
• Croatian: localeHr, 'hr'
• Danish: localeDa, 'da'
• Dutch: localeNl, 'nl'
• English: localeEn or undefined, 'en'
• English (UK): localeEnGB, 'en-GB'
• Farsi: localeFa, 'fa'
• German: localeDe, 'de'
• Greek: localeEl, 'el'
• Spanish: localeEs, 'es'
• Finnish: localeFi, 'fi'
• French: localeFr, 'fr'
• Hebrew: localeHe, 'he'
• Hindi: localeHi, 'hi'
• Hungarian: localeHu, 'hu'
• Italian: localeIt, 'it'
• Japanese: localeJa, 'ja'
• Korean: localeKo, 'ko'
• Lithuanian: localeLt, 'lt'
• Norwegian: localeNo, 'no'
• Polish: localePl, 'pl'
• Portuguese (Brazilian): localePtBR, 'pt-BR'
• Portuguese (European): localePtPT, 'pt-PT'
• Romanian: localeRo, 'ro'
• Russian: localeRu, 'ru'
• Russian (UA): localeRuUA, 'ru-UA'
• Slovak: localeSk, 'sk'
• Serbian: localeSr, 'sr'
• Swedish: localeSv, 'sv'
• Thai: localeTh, 'th'
• Turkish: localeTr, 'tr'
• Ukrainian: localeUa, 'ua'

Default value: undefined

rtl

boolean

Enables right-to-left display.

Default value: false