Radio Button Component

Radio buttons are the unsung heroes of forms, web design, and other user input-based components.

What is a radio button?

A radio button is a component that allows a user to choose one of a set of predetermined options. Radio buttons are used broadly across websites and applications, as they provide a way to collect simple user input in a straightforward manner.

Radio buttons are static elements that appear as a list of options with a checkbox next to them. Where regular checklists allow users to choose multiple options, radio buttons (usually) only allow for one selection.

🤖 Fun fact, radio buttons are a digital version of a real-life phenomenon: Buttons on old radios (which would switch between frequencies) would mechanically pop out when another button was pressed, allowing for only one button to be depressed or “selected” at a time.

‍

A gif showing radio buttons being selected — *Image via* *JitBit*

Radio button examples

Radio buttons are used in software all the time. Some examples include

Website cookie preferences: All cookies, just necessary cookies, no cookies
Online purchasing: Pickup versus delivery, shipping priority
Quizzes and tests: Those dreaded, multiple-choice standardized tests which are now digitized
Software settings: Light mode versus dark mode, notification preferences, sound preferences
Explicit controls: Any time a field can only accept a specified selection as opposed to multiples or unique values

Using Internal’s radio button components

‍

Radio buttons being edited in Internal — *Radio button component being edited in Internal*

‍

Internal offers a dynamic radio button component that can be used alone, or in combination with other components. Radio button components can:

Be used with forms: Define predetermined values within a form so that the users can only choose from your options.
Provide an input value for several component filters: Binding a radio button’s values to components allows multiple data sets to be filtered on a single criterion.
Be used to pre-fill fields from other components: A user-selected value can be used to automatically populate values in other components like buttons or forms.

For more info on how to use radio buttons attached to a data source or application, check out Internal’s radio buttons documentation.

Resources:

Mozilla: Radio input type

W3 Schools: Radio input type

CSS Tricks: Custom Radios and Checkboxes