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/react-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.tsx

import { RadioButton } from "@svar-ui/react-core";

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

App.tsx

<RadioButton />

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 inputValue API property.

<RadioButton inputValue="1" />

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:

<RadioButton value={true} />

Related sample: Radio Button

Adding a label

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

<RadioButton label="myRadio" />

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> component 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
  • specify the id variable to bind the field to the radio button control

import { RadioButton, Field } from "@svar-ui/react-core";

After that, wrap the radio button in question into the <Field> and provide it as a render prop that receives the generated id:

<Field label="Radio" position="left" type="checkbox">
  {({ id }) => <RadioButton id={id} />}
</Field>

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.

<RadioButton label="Disabled checked radio button" disabled={true} />

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

<RadioButton disabled />

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. In React this is exposed as the onChange prop (camelCased). Inside the handler you can get the value of the checked button in the following way:

function handleChange({ checked }) {
  console.log(checked);
}

<RadioButton onChange={handleChange} />

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:

<RadioButton label="Option 1" inputValue="1" value={true} name="radiogroup1" />
<RadioButton label="Option 2" inputValue="2" name="radiogroup1" />

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

import { RadioButtonGroup } from "@svar-ui/react-core";

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

App.tsx

<RadioButtonGroup />

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

App.tsx

import { RadioButtonGroup } from "@svar-ui/react-core";

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

<RadioButtonGroup options={options} />

Setting the checked radio button

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

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" }
];

<RadioButtonGroup options={options} value={1} />

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:

• declare a state variable that will contain the value of the control:

import { useState } from "react";
import { RadioButtonGroup } from "@svar-ui/react-core";

const [checked, setChecked] = useState(1);

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

• pass the variable to the value prop of the control and update it from the onChange handler:

<RadioButtonGroup
  options={options}
  value={checked}
  onChange={(newValue) => setChecked(newValue)}
/>

If the control emits a different event shape, adapt the onChange handler accordingly (for example: onChange=). The value assigned to the bound state will be updated on each change of the checked radio button in the group.

Alternative: using a variable named value

If your state variable is named value, you can wire it directly and use the setter as the handler:

import { useState } from "react";
import { RadioButtonGroup } from "@svar-ui/react-core";

const [value, setValue] = useState(1);

<RadioButtonGroup options={options} value={value} onChange={setValue} />

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:

<RadioButtonGroup options={options} type="inline" value={3} />

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

<RadioButtonGroup options={options} type="grid" value={4} />

Related sample: Radio Button