Accessible Checkbox

Question

Build a custom checkbox component with accessible labeling.

Accepted Answer

import './index.css'; import React, { useState } from 'react'; function App() { const [checked, setChecked] = useState(false); return (

Accessible Checkbox

setChecked(e.target.checked)} /> Check me

{checked ? 'Checked' : 'Unchecked'}

); } export default App; body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; background-color: #f5f5f5; } * { box-sizing: border-box; } .checkbox-demo { max-width: 400px; margin: 60px auto; background: #fff; border-radius: 12px; box-shadow: 0 2px 16px rgba(0,0,0,0.08); padding: 32px 24px; text-align: center; } .checkbox-title { font-size: 1.5rem; font-weight: bold; margin-bottom: 1.5rem; color: #1f2937; } .checkbox-label { display: flex; align-items: center; gap: 0.7rem; cursor: pointer; font-size: 1.1rem; } .checkbox-label input { display: none; } .checkbox-custom { width: 22px; height: 22px; border: 2px solid #2563eb; border-radius: 6px; display: inline-block; background: #fff; position: relative; } .checkbox-label input:checked + .checkbox-custom { background: #2563eb; } .checkbox-label input:checked + .checkbox-custom:after { content: ''; display: block; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; position: absolute; left: 5px; top: 6px; transform: rotate(-45deg); } .checkbox-text { user-select: none; } .checkbox-status { margin-top: 1rem; color: #2563eb; font-weight: 600; }