Reference Guide

Radio Button

The Radio component allows you to add a list of one or more radio buttons to a screen. Radio Buttons are similar to Checkboxes, only they’re mutually exclusive. This is especially useful when you want an end-user to select only one item from a list.

Radio buttons are great for when only a single item can be chosen

Required Fields

If a list of radio buttons in your form is mandatory, Nutshell can automatically validate that an end-user has not left it blank. Just set the field to be a required field, and Nutshell will do the rest.

Managing List Items

You can specify your list of radio buttons manually – by entering them by hand in the Properties panel – or dynamically from a data-source, such as a Nutshell database table.

To add your radio buttons by hand, make sure the Static Items option is selected, and add items to the list using the little “+” button.

List items and default selections are managed in the Properties Panel

Each item has an Option and a Value. The Option is the visible label that will appear alongside the radio button on-screen. The Value is the actual value that will be saved or processed when the form is submitted. You can set them to the same value if you like.

If you’d like your list to be generated dynamically from a data-source, choose the “Dynamic from data source” option instead. This allows you to generate the list from a Database table, displaying every record in that table as a radio button.

Default Option

If your form is just capturing data, your list of radio buttons will be un-checked by default. Sometimes, it’s helpful to pre-select a radio button – either by selecting it from the dropdown in the properties panel, or by selecting them dynamically from a data-source. What do we mean by dynamically? Dynamic data is content that changeable based on something your end-user does, or loaded at run-time from a database table.

You can choose which radio-button should be selected by default when they appear on-screen

In the Properties panel, you can select which radio button should be ticked by default, either by choosing it from the dropdown, or by selecting a value from a database record. Use the lightning bolt button to choose exactly which record. The process of dynamically populating components and form controls is detailed in Key Concepts.

Read-only

Sometimes, you’ll need to display data – for example, in an edit form – which should not be edited. When you set a radio button list to be read-only, your data will be displayed but will not be editable by the end-user.

Resizing a Radio Component

To resize a radio button component, click and drag on a corner of its bounding box. A radio button list can only be resized horizontally. The height of a radio button list is dictated by the number of list items within it.

Radio Button Properties

When a Radio component is selected on the Canvas, the following settings are available in the Properties panel: