Magnifying A to Z index
Letters from A to Z grow under the cursor like a dock, and the chosen one pops out in a bubble.
Settings
Code
<fieldset class="uv-faz"><legend>Artists by letter</legend><div class="rw"><label><input type="radio" name="uv-faz"><span data-l="A">A</span></label><label><input type="radio" name="uv-faz"><span data-l="B">B</span></label><label><input type="radio" name="uv-faz"><span data-l="C">C</span></label><label><input type="radio" name="uv-faz"><span data-l="D">D</span></label><label><input type="radio" name="uv-faz"><span data-l="E">E</span></label><label><input type="radio" name="uv-faz"><span data-l="F">F</span></label><label><input type="radio" name="uv-faz"><span data-l="G">G</span></label><label><input type="radio" name="uv-faz"><span data-l="H">H</span></label><label><input type="radio" name="uv-faz"><span data-l="I">I</span></label><label><input type="radio" name="uv-faz"><span data-l="J">J</span></label><label><input type="radio" name="uv-faz"><span data-l="K">K</span></label><label><input type="radio" name="uv-faz"><span data-l="L">L</span></label><label><input type="radio" name="uv-faz" checked><span data-l="M">M</span></label><label><input type="radio" name="uv-faz"><span data-l="N">N</span></label><label><input type="radio" name="uv-faz"><span data-l="Ñ">Ñ</span></label><label><input type="radio" name="uv-faz"><span data-l="O">O</span></label><label><input type="radio" name="uv-faz"><span data-l="P">P</span></label><label><input type="radio" name="uv-faz"><span data-l="Q">Q</span></label><label><input type="radio" name="uv-faz"><span data-l="R">R</span></label><label><input type="radio" name="uv-faz"><span data-l="S">S</span></label><label><input type="radio" name="uv-faz"><span data-l="T">T</span></label><label><input type="radio" name="uv-faz"><span data-l="U">U</span></label><label><input type="radio" name="uv-faz"><span data-l="V">V</span></label><label><input type="radio" name="uv-faz"><span data-l="W">W</span></label><label><input type="radio" name="uv-faz"><span data-l="X">X</span></label><label><input type="radio" name="uv-faz"><span data-l="Y">Y</span></label><label><input type="radio" name="uv-faz"><span data-l="Z">Z</span></label></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 Filters
See all FiltersWhere to use it
Long directories such as artists, contacts, glossaries or brand lists are easier to browse with an alphabet index. This strip magnifies the letter under the pointer and its neighbors, like the macOS dock, using only :has and sibling selectors. The selected letter appears above in a colored teardrop bubble, so the current section is always clear.
Every letter is a radio button, which makes it keyboard friendly and easy to wire to a list. The Spanish alphabet includes Ñ; remove it or add letters for other languages directly in the HTML.