Tipo de archivo*.pdf *.mp3
Latching mechanical key filters
Mechanical keyboard keys that stay pressed with their LED lit, while a small screen spells out the filter.
Settings
Code
<div class="uvq05-kb"><p class="ol" aria-live="polite"><span class="pr">File type</span><span class="tx">*.pdf *.mp3</span></p><div class="pl"><button type="button" aria-pressed="true"><span class="cap"><span class="lg">PDF</span><i class="led" aria-hidden="true"></i></span></button><button type="button" aria-pressed="false"><span class="cap"><span class="lg">JPG</span><i class="led" aria-hidden="true"></i></span></button><button type="button" aria-pressed="true"><span class="cap"><span class="lg">MP3</span><i class="led" aria-hidden="true"></i></span></button><button type="button" aria-pressed="false"><span class="cap"><span class="lg">ZIP</span><i class="led" aria-hidden="true"></i></span></button><button type="button" aria-pressed="false"><span class="cap"><span class="lg">DOC</span><i class="led" aria-hidden="true"></i></span></button><button type="button" class="cl"><span class="cap"><span class="lg">Clear</span></span></button></div></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 Filters
See all FiltersWhere to use it
Old hardware used latching keys that stayed down while active, and this file-type filter brings that feel back with keycaps. Each key is a toggle button with a sculpted cap, a deep skirt, a short travel on press and a green LED when latched. An orange clear key releases them all, and an OLED strip shows the matching pattern.
The first colour lights the LEDs and the screen text, the second paints the clear key. Change the legends to tags, sizes or any short code, and keep it to six keys per row so the caps stay readable.