Radio

A Radio button is a component that acts as a single input control and is part of a set within a Radio Group. It has two states, On and Off.

Properties

Name	Type	Default	Description
label	node		Specifies a label for the component.
value	any		Specifies a value for the component.
disabled	bool	false	If true, the radio button is disabled.
required	bool	false	If true, the radio button must be checked.
readOnly	bool	false	If true, the radio button is read only.
autofocus	bool	false	If true, autofocus is enabled.
loopData	array		Defines an array of data in the format id, prop1, prop2, prop3. The id must be is small letters.
itemName	string		Defines a unique identifier that allows access the array element's properties.

Style Attributes

Name	Type	Default	Description
color	default primary secondary error info success warning string	primary	Defines the color of the component.
size	small medium string	medium	Defines the size of the component.
labelPlacement	top bottom end start string	end	Specifies the location of the radio label.
disableRipple	bool	false	By default, the radio component has a ripple effect triggered when the radio state is modified. To disable this effect, set "Disable Ripple" on.

[!NOTE] Example: How to create dynamic Radio buttons There are a few ways in which you can create dynamic Radio buttons using the built in Loop property.

• A backend database request
• A local state
• An array

For this example we'll assume you already have a Page with a Radio Group component and a backend database request.

Backend Database Request

1. Select the first Radio item in your Radio Group, scroll to the bottom of the Properties pane, and expand the Loop section.
2. In the Loop Data field, enter the name of your database request as {{Request.data}} and enter the word item in the Item Name field.
3. We will assume that your request contains a "lastName" field.
4. Scroll to the top of the Properties pane and enter {{item.lastName}} in the Label and Value fields.
5. You should immediately see your Radio Group populated by a list of last names from your database request.
6. Click "Preview" to see how your Radio Group looks in a browser window.

Local State

1. Click on the State icon, which opens the State pane. Ensure the Local tab is selected and click the "+" button to create a new state.
2. In the pop-up window, enter "myData" for the Name, select "Array" in the Type drop-down, and click the expand arrow in the Default Value input field.
3. Enter the following array in the pop-up panel: [{"id":"1","lastname":"James"},{"id":"2","lastname":"Smith"},{"id":"3","lastname":"Williams"},{"id":"4","lastname":"Edwards"}] then click "Create".
4. Close the State pane, select the first Radio item in your Radio Group, scroll to the bottom of the Properties pane, and expand the Loop section.
5. In the Loop Data field, enter the name of your database request as {{myData.value}} and enter the word item in the Item Name field.
6. Scroll to the top of the Properties pane and enter {{item.lastname}} in the Label and Value fields.
7. You should immediately see your Radio Group populated by a list of last names from your local state.
8. Click "Preview" to see how your Radio Group looks in a browser window.

Array

1. Select the first Radio item in your Radio Group, scroll to the bottom of the Properties pane, and expand the Loop section.
2. In the Loop Data field, click the expand arrow and enter the following array in the pop-up panel: [{"id":"1","lastname":"James"},{"id":"2","lastname":"Smith"},{"id":"3","lastname":"Williams"},{"id":"4","lastname":"Edwards"}] then click "Done".
3. Enter the word item in the Item Name field.
4. Scroll to the top of the Properties pane and enter {{item.lastname}} in the Label and Value fields.
5. You should immediately see your Radio Group populated by a list of last names from your array.
6. Click "Preview" to see how your Radio Group looks in a browser window.

For more detail on the Radio component, see the MUI developer docs.