Radio Button

The Radio Button control allows selecting just one option from a pair or a set of options. A radio button may have a value associated with it for form submitting. You can also check or disable radio buttons as well as join them into groups. What is more, you can provide a label for a radio button and place it to any side of the control.

Related resources

• Get the widget by installing the @svar-ui/vue-core package.
• Check Radio Button API Reference to see the list of configuration properties.
• Explore the samples to visualize the available features.

Initialization

To create a Radio Button instance on a page, you need to complete two steps:

• import the source file of the control on a page:

App.vue

<script setup>
  import { RadioButton } from "@svar-ui/vue-core";
</script>

• apply the <RadioButton> tag to initialize a radio button control:

App.vue

<template>
  <RadioButton/>
</template>

A default radio button is rendered unchecked with no label.

Setting the value

A radio button doesn't have a predefined value on initialization. While the radio button's value is not visible in the user interface, it is necessary when a form is submitted and data with the radio button's state is sent to the server.

You can set the value for a radio button via the value API property.

<template>
  <RadioButton inputValue="1" />
</template>

Related sample: Radio Button

Setting the checked state

A radio button is initialized on a page in the unchecked state. You can control the checked/unchecked state of the control via the value property. To check a radio button, set its value property to true or without a value:

<template>
  <RadioButton :value="true"/>
</template>

Related sample: Radio Button

Adding a label

A default radio button has no label. To add one, make use of the label property:

<template>
  <RadioButton label="myRadio" />
</template>

Related sample: Radio Button

Using the left-side label

By default, a label is placed to the right of a radio button. It is also possible to put a label to the left of a radio button with the help of the Field component.

You need to take the following steps:

• include the Field source file on a page, declare the <Field> tag and complete it with the necessary props:
  • add a desired label via the label property
  • set the type="checkbox" property for the Field component
  • set the position="left" property to place the label to the left of the radio button

<script setup>
  import { RadioButton, Field } from "@svar-ui/vue-core";
</script>

<template>
  <Field label="Radio" position="left" type="checkbox" />
</template>

After that, wrap the radio button into the <Field> tag. The Field component automatically generates an id for the inner control, which creates label-input association.

<template>
  <Field label="Radio" position="left" type="checkbox">
    <RadioButton />
  </Field>
</template>

Related sample: Radio Button

Setting the disabled state

Whenever you need to render a disabled radio button, you can do it with the help of the disabled property set to true.

<template>
  <RadioButton label="Disabled checked radio button" :disabled="true"/>
</template>

It is also possible to set the disabled state for a radio button by declaring the property with no value:

<template>
  <RadioButton disabled />
</template>

Related sample: Radio Button

Catching the change of the state

In case you need to catch when a radio button is checked, you can do it by handling the change event. Inside the event you can get the value of the checked button in the following way:

<script setup>
  function handleChange({checked}){
       console.log(checked);
     }
</script>

<template>
  <RadioButton :onchange="handleChange"/>
</template>

The handler function of the change event takes an object with the state of a radio button.

Grouping radio buttons via API

You can easily create a group of radio buttons by using their name property. When you set the same name to radio buttons they become members of the same group:

<template>
  <RadioButton label="Option 1" inputValue="1" :value="true" name="radiogroup1" />
  <RadioButton label="Option 2" inputValue="2" name="radiogroup1" />
</template>

The two radio buttons in the above example are grouped together and checking of one option automatically excludes checking of the other one.

Related sample: Radio Button

Using the RadioButtonGroup control

Another way of grouping radio buttons is to use the RadioButtonGroup control. The RadioButtonGroup control allows you to create groups of radio buttons. It has several props:

• options - an array of radio buttons to group, each radio button is presented as an object with a value and a label
• value - the value of the checked radio button
• type - a string with the type of arranging radio buttons in a group, can be "inline" or "grid"

Making a group

To create a Radio Button Group instance on a page, you need to complete two steps:

• import the source file of the control on a page:

App.vue

<script setup>
  import { RadioButtonGroup } from "@svar-ui/vue-core";
</script>

• apply the <RadioButtonGroup> tag to initialize the control:

App.vue

<template>
  <RadioButtonGroup />
</template>

• specify an array of radio buttons' objects to group and use the options prop of the control to point to the array:

App.vue

<script setup>
  const options = [
    { id: 1, label: "Option 1" },
    { id: 2, label: "Option 2" },
    { id: 3, label: "Option 3" },
    // more options
  ];
</script>

<template>
  <RadioButtonGroup :options="options" />
</template>

Setting the checked radio button

You can declare which radio button in a group will be checked. Use the value property for this purpose.

<script setup>
  const options = [
    { id: 1, label: "Option 1" },
    { id: 2, label: "Option 2" },
    { id: 3, label: "Option 3" },
    { id: 4, label: "Option 4" },
    { id: 5, label: "Option 5" }
  ];
</script>

<template>
  <RadioButtonGroup :options="options" :value="1" />
</template>

As a result, the first radio button in the group given above will be checked:

Getting the checked radio button

You can get the value of the currently checked radio button in the following way:

• specify a variable that will contain the value of the control:

<script setup>
  import { ref } from "vue";

  const checked = ref(1);

  const options = [
    { id: 1, label: "Option 1" },
    { id: 2, label: "Option 2" },
    { id: 3, label: "Option 3" },
    // more options
  ];
</script>

• bind the variable to the value property of the control:

<template>
  <RadioButtonGroup :options="options" v-model:value="checked" />
</template>

The value assigned to the bound variable will be updated on each change of the checked radio button in the group.

Setting the type of grouping

Besides arranging radio buttons in a group in a usual way - one under another as in a list, there are two other options available with the type property:

1. You can place radio buttons inline, i.e. in a row, by using the type="inline" property:

<template>
  <RadioButtonGroup :options="options" type="inline" :value="3" />
</template>

2. One more way of grouping radio buttons is to put them into columns with the help of the type="grid" property:

<template>
  <RadioButtonGroup :options="options" type="grid" :value="4" />
</template>

Related sample: Radio Button

Styling a radio button

You can apply custom styles to RadioButton by providing a CSS class name via the css property and defining the desired styles in a <style> block:

<template>
  <div class="demo-box">
    <RadioButton label="Option" css="my-class" />
  </div>
</template>

<style scoped>
  .demo-box :global(.my-class) {
    background-color: gold;
  }
</style>

Vue scoped styles apply only to the current component's elements. Use :global() to target elements inside SVAR controls. To make the selector more specific, include the HTML tag name before the class.

Styling a radio button group

You can apply custom styles to RadioButtonGroup by providing a CSS class name via the css property and defining the desired styles in a <style> block:

<template>
  <div class="demo-box">
    <RadioButtonGroup :options="options" css="my-class" />
  </div>
</template>

<style scoped>
  .demo-box :global(.my-class) {
    background-color: gold;
  }
</style>

Vue scoped styles apply only to the current component's elements. Use :global() to target elements inside SVAR controls. To make the selector more specific, include the HTML tag name before the class.