Documentation Index
Fetch the complete documentation index at: https://docs.brikl.co/llms.txt
Use this file to discover all available pages before exploring further.
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
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 |
Platforms
| Platform | Supported |
|---|---|
| Web | ✅ |
| Mobile | ✅ |
License
This component requires a Starter plan.