{"component":{"aria":"Hidden native <input type=checkbox> drives keyboard + screen-reader behaviour. The visual <span class=ps-check__box> is decorative (aria-hidden). Click target is the entire <label>; works for mouse and touch.","category":"components","css":".ps-check{display:inline-flex;align-items:center;gap:var(--ps-space-3,8px);cursor:pointer}.ps-check__input{position:absolute;opacity:0;width:1px;height:1px;clip:rect(0,0,0,0)}.ps-check__box{display:inline-flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;border:1px solid var(--ps-border-strong,#aab0bb);border-radius:var(--ps-corner-1,2px);background-color:var(--ps-surface-base,#fff);transition:background-color var(--ps-speed-2,120ms) var(--ps-ease-utility,cubic-bezier(.2,0,.4,1))}.ps-check__input:checked~.ps-check__box{background-color:var(--ps-interactive-primary,#234ed8);border-color:var(--ps-interactive-primary,#234ed8)}.ps-check__input:checked~.ps-check__box::after{content:'';width:.5rem;height:.25rem;border-left:2px solid var(--ps-ink-on-interactive,#fff);border-bottom:2px solid var(--ps-ink-on-interactive,#fff);transform:rotate(-45deg) translate(1px,-1px)}.ps-check__input:focus-visible~.ps-check__box{outline:2px solid var(--ps-focus-ring,#234ed8);outline-offset:2px}.ps-check__label{font-size:.875rem;color:var(--ps-ink-primary,#0e0f12)}","description":"Boolean choice. Use when each option is independent of the others.","display_name":"Checkbox","html":"<label class=\"ps-check\">\n  <input type=\"checkbox\" class=\"ps-check__input\" id=\"{{id}}\">\n  <span class=\"ps-check__box\" aria-hidden=\"true\"></span>\n  <span class=\"ps-check__label\">{{label}}</span>\n</label>","name":"checkbox","registry_type":"component","research_links":["primitive-vocabulary-rationale"],"tabs_available":["accessibility","code","style","usage"],"variants":[],"wcag":{"focus_visible":true,"target":"2.2 AAA"}},"tenant":"pointsav","theme":"pointsav-brand"}