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 @wx/svelte-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.svelte

<script>
    import { RadioButton } from "@wx/svelte-core";
</script>

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

App.svelte

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

<RadioButton value="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 checked property. To check a radio button, set its checked property to true or without a value:

<RadioButton checked={true}/> <!-- equals to <RadioButton checked/> -->

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

<script>
    import { RadioButton , Field } from "@wx/svelte-core";
</script>

<Field label="Radio" position="left" type="checkbox" let:id/>

After that, wrap the radio button in question into the <Field> tags and specify the id property for the radio button:

<Field label="Radio" position="left" type="checkbox" let:id>
    <RadioButton {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 /> <!-- equals to "disabled={true}" -->

Related sample: 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" value="1" checked={true} name="radiogroup1" />
<RadioButton label="Option 2" value="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.svelte

<script>
    import { RadioButtonGroup } from "@wx/svelte-core";
</script>

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

App.svelte

<RadioButtonGroup />

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

App.svelte

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

<RadioButtonGroup {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.

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

<RadioButtonGroup {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:

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

<script>
    let checked = 1;

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

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

<RadioButtonGroup {options} bind:value={checked} />

If the name of the variable matches its value, you can use the shorthand while binding the property:

<script>
    let value = 1;

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

<RadioButtonGroup {options} bind:value />

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:

<RadioButtonGroup {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} type="grid" value={4} />

Related sample: Radio Button