Checkbox.astro (1992B)
1 --- 2 interface Props { 3 name: string; 4 label: string; 5 checked?: boolean; 6 disabled?: boolean; 7 } 8 9 const { name, label, checked = false, disabled = false } = Astro.props; 10 --- 11 12 <label class={disabled ? "form-control--disabled" : "form-control"}> 13 <input type="checkbox" name={name} checked={checked} disabled={disabled} /> 14 {label} 15 </label> 16 17 <style lang="scss"> 18 input[type="checkbox"] { 19 /* Add if not using autoprefixer */ 20 -webkit-appearance: none; 21 appearance: none; 22 /* For iOS < 15 to remove gradient background */ 23 background-color: #334155; 24 /* Not removed via appearance */ 25 margin: 0; 26 font: inherit; 27 color: #94a3b8; 28 width: 20px; 29 height: 20px; 30 border: 1px solid #94a3b8; 31 border-radius: 4px; 32 transform: translateY(4px); 33 34 display: grid; 35 place-content: center; 36 } 37 38 input[type="checkbox"]::before { 39 content: ""; 40 width: 0.65em; 41 height: 0.65em; 42 transform: scale(0); 43 transition: 120ms transform ease-in-out; 44 box-shadow: inset 1em 1em #94a3b8; 45 46 /* Windows High Contrast Mode */ 47 background-color: #94a3b8; 48 49 transform-origin: bottom left; 50 clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); 51 } 52 53 input[type="checkbox"]:checked::before { 54 transform: scale(1); 55 } 56 57 input[type="checkbox"]:focus { 58 outline: max(2px, 0.15em) solid currentColor; 59 outline-offset: max(2px, 0.15em); 60 } 61 62 input[type="checkbox"]:disabled { 63 color: #4b5563; 64 cursor: not-allowed; 65 } 66 67 .form-control--disabled { 68 color: #4b5563; 69 cursor: not-allowed; 70 } 71 72 .form-control { 73 font-size: 18px; 74 font-weight: 400; 75 display: grid; 76 grid-template-columns: 1em auto; 77 gap: 0.5em; 78 } 79 80 .form-control + .form-control { 81 margin-top: 0.25em; 82 } 83 </style>