HTML + CSSCheckboxes
Opening eye checkbox
A closed eye with lashes that opens and glances side to side when the option is turned on.
Settings
16px
1x
Code
<label class="uv-cey"><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><g class="sh"><path d="M3 11c2.5 3.2 5.5 4.8 9 4.8s6.5-1.6 9-4.8"/><path d="M6.2 14l-1.4 2M12 15.8v2.3M17.8 14l1.4 2"/></g><g class="op"><path d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z"/><circle class="pu" cx="12" cy="12" r="3" fill="currentColor" stroke="none"/></g></svg></span>Profile visible to everyone</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
See all CheckboxesWhere to use it
Visibility settings deserve an icon that says what they do. This checkbox shows a sleeping eye while the option is off and opens it with a soft reveal when it is on, then the pupil glances left and right now and then. It fits privacy panels, profile visibility, show password options and shared document settings.
Because the native checkbox is still there, the label can say exactly what changes, for example who can see a profile. With reduced motion the eye opens without the glancing, so the state stays obvious.