Overview
Radio 02 is a custom radio button group component featuring two selectable options, each with a circular toggle icon, a bold label, and a descriptive subtitle. It uses custom states to track which option is currently selected, visually updating the selected radio icon when a user clicks an option. This component is ideal for forms or settings screens where users must choose one option from a list.
How to use
Open the Brikl panel
Navigate to the Elements category in the Brikl panel.
Copy the component
Find Radio 02 and click Copy.
Paste into your editor
Paste it into your Bubble canvas with Cmd + V (Mac) or Ctrl + V (Windows),
or right-click on the canvas and select Paste.
States
This component includes conditional states that automatically change its appearance.
| State | Trigger | Visual effect |
|---|
| Option Selected | User clicks on a radio button group (Option 1 or Option 2) | The parent group’s custom state ‘radio_item_’ is updated to match the clicked option’s ‘item_’ value, causing the corresponding radio icon to switch from an outlined circle to a filled dot icon with a dark background. |
These states are handled natively by Bubble and require no additional setup.
They will work automatically once the component is pasted into your editor.
Responsive
This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble’s built-in mobile breakpoint.
Workflows
This component includes pre-built workflows.
| Trigger | Action |
|---|
| GP - Button Option 1 (Radio 02) is clicked | Sets the custom state ‘radio_item_’ on the parent group (GP - Radio 02) to the value of Option 1’s custom state ‘item_’ (value: 1), marking Option 1 as selected. |
| GP - Button Option 2 (Radio 02) is clicked | Sets the custom state ‘radio_item_’ on the parent group (GP - Radio 02) to the value of Option 2’s custom state ‘item_’ (value: 2), marking Option 2 as selected. |
These workflows are included when you use the Copy with Workflows option in the Brikl panel.
Requirements
| |
|---|
| License | Starter plan required |
| Plugins | None |
| Custom code | Not required |
| Platform | Supported |
|---|
| Web | ✅ |
| Mobile | ✅ |
License
This component requires a Starter plan.
