Camera mode strip radio
The mode strip from a phone camera app: the chosen mode slides to the centre in yellow and the viewfinder changes with it.
Settings
Code
<fieldset class="uvq04-cam"><legend>Camera mode</legend><div class="ph"><div class="vf" aria-hidden="true"><i class="bk"></i><i class="gr"></i><i class="fc"></i><i class="pa"></i><b class="bd"></b></div><div class="md"><div class="tr"><label><input type="radio" name="uvq04-cam"><span>Slow-mo</span></label><label><input type="radio" name="uvq04-cam"><span>Video</span></label><label><input type="radio" name="uvq04-cam" checked><span>Photo</span></label><label><input type="radio" name="uvq04-cam"><span>Portrait</span></label><label><input type="radio" name="uvq04-cam"><span>Panorama</span></label></div></div><span class="sh" aria-hidden="true"><i></i></span></div></fieldset>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Radio buttons
See all Radio buttonsWhere to use it
Modelled on the camera app of a phone, this radio group lines up five modes under a small viewfinder. The chosen word slides to the centre in yellow, the shutter turns red for video modes, a badge shows the frame rate or aperture, and portrait mode blurs the edges. It works for photo tools, creative apps and media pickers.
Swap the yellow with the main color and the recording red with the secondary one. The strip uses fixed widths per item, so keep each mode to one or two short words, and arrow keys move through it like any native radio group.