A Radio Button is a component of the Graphical User Interface (GUI) which is used to select a single item from a predefined list of options. Sometimes, the option might be only two – You may choose only one option (Radio Button) among the set of options.
You can customize the field options e.g. attributes, help texts etc. To enable customization just click on the pencil icon you get when hovering over the field. See the below screenshot for better understanding –
Then you will be taken to Input Customization section. The Input Customization section allows you to customize your field ultimately.
In Input Customization section, you will find some different options like–
- General Fields. 2. Advanced Fields
In general fields section, there are some important options which are given below.
1.Element Label: Give a proper label to your input that suits your purpose here. It will be shown to the user during filling up the form. It is equivalent to HTML label.
2. Label Placement: Determine the placement of the label, that you set previously, in respect of the input field. The available options are Top’, ‘Left’, ‘Right’, ‘Default’. All of those are self-explanatory except the ‘Default’. What it means is it will confirm your global label placement settings.
3. Admin Field Label: If you want to show the different label for your admin users when they view the form submissions you can configure that using this option. It doesn’t have any actual effect on the form rather only for administrative purposes.
4. Placeholder: When the input is empty it is customary to show a certain message to the users so they can grasp what the input field expects from them. It is the equivalent of HTML input placeholder attribute.
5. Options: This is to give necessary items in form of a list. You can add more list by clicking plus(+) icon and you can also delete an unnecessary item by clicking minus(-) icon in a drop-down list by this option. You also can show and hide the value by checking a box situated at the top of options section.
6. Required: Determine whether the field could be empty or not when the user submits your form by choosing the appropriate option from here.
Even if the aforementioned customizations are not enough for you—to be able to configure the field to your heart’s content the following advanced configurations are available.
- Container Class: For some reason, i.e. custom stylesheet, you want to hook into the input field’s parent wrapper. Use this option to add your custom CSS classes to the field’s wrapper.
- Element Class: Similarly, you can add custom CSS classes to the input field itself.
- Help Message: To guide your user thoroughly you can use this option. Just add your text here and it will be shown as a help message to the user.
- Name Attribute: The input field’s name attribute is the HTML equivalent of the same name. You don’t need to modify this.
- Conditional Logic: By the conditional logic, you can play different roles for different use cases. You can create certain rules to dynamically hide/show the input field based on the values from some other fields. See this article to get the better understanding as this offers a wide range of use cases. For details, please check here.
That’s it! I hope this tutorial helped you to set up Radio Button in your form that will give an opportunity to select an item from multiple options on a form.