AIMRAN
HTML + CSSRadio buttons

Vertical tabs with light bar

A glowing bar slides up and down a thin track to sit next to the active option.

Settings

16px
1x

Code

<div class="uv-rdv"><span class="ln"><i></i></span><button>Overview</button><button class="on">Activity</button><button>Settings</button><button>Help</button></div>

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

Bouncing dot radio

Radio buttonsHTML + CSS

Drawn ring radio

Radio buttonsHTML + CSS

Sliding pill selector

Radio buttonsHTML + CSS

Radio cards with icons

Radio buttonsHTML + CSS

Jumping dot radio

Radio buttonsHTML + CSS

Liquid fill radio

Radio buttonsHTML + CSS

Pricing plan selector

Radio buttonsHTML + CSS

Star rating with label

Radio buttonsHTML + CSS

Where to use it

This works as a side menu more than a form field: the sections of an account page, a dashboard sidebar with overview, activity and settings, or the chapters of a documentation page. The glowing bar slides to the active item, so you always know where you are. Vertical tabs in HTML, CSS and a bit of JavaScript.

It looks best with four to seven items of similar length. On dark themes the glow stands out nicely; on light ones you may want to soften it so the bar does not look blurry.