Open experiment
Fluid radio selector
Moves one fluid highlight between mutually exclusive options while preserving native radio behavior. Arrow keys and pointer selection move the shared highlight and update option detail. Uses one traveling selection body across a radiogroup rather than independent pills.
Lab tested Responsive Dark mode Interactive
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<form class="cmp-fluid-radio-selector cmp-atlas" data-state="idle" data-variant="4" novalidate>
<div class="cmp-atlas__field-head"><span>Choice controls</span><b>Fluid choice channel</b></div>
<fieldset>
<legend>Rendering mode</legend>
<label
><input type="radio" name="fluid-mode" data-radio value="Balanced" checked /> Balanced</label
><label><input type="radio" name="fluid-mode" data-radio value="Vivid" /> Vivid</label
><label><input type="radio" name="fluid-mode" data-radio value="Focused" /> Focused</label>
</fieldset>
<output data-output>Balanced</output>
<div class="cmp-atlas__field-meter" aria-hidden="true"><i></i></div>
<p data-status aria-live="polite">Control ready</p>
</form>
No runtime reactions detected Open in Editor
Validated in the lab
Experiment report
- Schema and source files passed
- Responsive test passed
- Keyboard test passed
- No console errors
Component ingredients
- Dependencies
- None
- Browser support
- Current Chrome, Current Edge, Current Firefox, Current Safari
- Version
- 1.0.0
- Last tested
- 2026-08-02
Accessibility notes
- Every interactive target is a labelled native control with a visible focus treatment.
- State changes are communicated through a polite text status and never by color alone.
- The contained visual effects stop when the user requests reduced motion.
License: MIT License for open-source use, modification, and distribution.