HTML + CSSCheckboxes
Padlock checkbox
A padlock icon whose shackle swings open or snaps shut, so locking something really looks like it.
Settings
16px
1x
Code
<label class="uv-ck2l"><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path class="sh" d="M8 10V7a4 4 0 0 1 8 0v3"/><rect class="bd" x="5" y="10" width="14" height="10" rx="2.5"/><circle class="kh" cx="12" cy="15" r="1.4" fill="currentColor" stroke="none"/></svg></span>Lock on</label>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
Where to use it
A padlock says more than a tick when the option is about privacy: “Make this album private” in a photo app, locking a layer in a design tool or freezing a price in a booking form. Ticked, the lock closes and fills with colour; unticked, the shackle swings open. A lock toggle in HTML and CSS.
Write the label as a state, like “Private” or “Locked”, not as an action, so there is no doubt what the closed padlock means. The icon is drawn with strokes, so it stays sharp at any size.