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.


Mozilla: Radio input type

W3 Schools: Radio input type

CSS Tricks: Custom Radios and Checkboxes