Synchronize a selectable dropdown group with its active radio option using custom attributes. For each selection group marked with b-select = group, the script listens to interactions on option elements b-select = option and updates the main display elements b-select = text and b-select = icon accordingly. The displayed label is sourced from b-select = option-text, while the icon is copied from b-select = option-icon when present.
On page load, the script initializes the main display using the currently checked radio input select-input, or falls back to the first option if none are selected. Whenever an option is selected, the script updates both the main display and the visual state of all options by adding or removing the is-checked class on the active option and its child visual elements. This enables full styling and animation control for radio-based toggle buttons—such as backgrounds, icons, or labels—while preserving native radio and form behavior.
Synchronize each toggle’s visual state with its checkbox or radio input.
Each element with the toggle-input class is connected to its closest b-toggle = group wrapper.
When the input is checked, is-checked is added to the wrapper and to any nested elements marked with b-toggle = state.
When the input is unchecked, is-checked is removed from the wrapper and from all nested b-toggle = state elements.
Use b-toggle = state only on elements that need to visually change, such as text, tracks, thumbs, icons, cards, or labels.
This behavior supports checkbox toggles and radio button groups. The correct state is synchronized on page load without triggering unwanted animations.