Step sequencer checkboxes
Eight drum machine pads, each a real checkbox, with a running step light that flashes the pads you switched on.
Settings
Code
<fieldset class="uvq02-seq"><legend>Kick</legend><div class="pd"><label style="--i:0"><input type="checkbox" aria-label="Step 1"><i></i></label><label style="--i:1"><input type="checkbox" aria-label="Step 2"><i></i></label><label style="--i:2"><input type="checkbox" aria-label="Step 3"><i></i></label><label style="--i:3"><input type="checkbox" aria-label="Step 4"><i></i></label><label style="--i:4"><input type="checkbox" aria-label="Step 5"><i></i></label><label style="--i:5"><input type="checkbox" aria-label="Step 6"><i></i></label><label style="--i:6"><input type="checkbox" aria-label="Step 7"><i></i></label><label style="--i:7"><input type="checkbox" aria-label="Step 8"><i></i></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 Checkboxes
See all CheckboxesWhere to use it
Inspired by classic drum machines, this block turns eight checkboxes into the step pads of a sequencer. Each pad latches down and lights its red LED when active, while a running light sweeps across the row and makes the active steps flash in time. It works with keyboard and screen readers, and fits music apps, creative tools and playful settings panels.
The main color paints the first four pads and the secondary the last four, like the colour groups on real hardware. Rename the legend for each instrument and stack several rows to build a full pattern editor.