pierrelf.com
Summary#
Implement click-to-toggle behavior for checkboxes and mutual exclusion for radio button groups.
Details#
Checkbox#
- Click toggles `checked` state
- Space key toggles when focused
- `input.checked` reflects current state
- `change` event fires on toggle
- `` click toggles associated checkbox
- Visual state updates on toggle (rendered check mark)
Radio buttons#
- Click selects the radio button and deselects others in the same `name` group within the same form
- Space key selects when focused
- Arrow keys cycle within radio group (Up/Left = previous, Down/Right = next)
- `input.checked` reflects current state
- `change` event fires on selection change
- `` click selects associated radio button
- Visual state updates (filled dot for selected)
Indeterminate state#
- `input.indeterminate` property for checkboxes (visual only, does not affect `checked`)
- Render dash/minus indicator for indeterminate checkboxes
Acceptance criteria#
- Clicking checkboxes toggles their checked state
- Clicking radio buttons selects them and deselects siblings in the same name group
- Arrow keys navigate within radio groups
- `change` events fire on state changes
- Label clicks delegate to associated controls
- Visual rendering reflects checked/unchecked/indeterminate states
- Tests cover toggle behavior, radio group exclusion, and event dispatch
Dependencies#
- Form element parsing and DOM interfaces
- Form control rendering
- Focus management and tab navigation