# Checkbox & Radio
> Accessible checkboxes and radio groups bound with s-model.
Checkboxes and radios wrap a real `` in a styled label, so you get a
custom look without giving up native behavior. The input stays in the markup and
carries the state; the `.s-box` next to it is only decoration. Bind any of them
with [s-model](https://summitjs.velofy.co/s-model/) and the checked state flows both ways.
## A single checkbox
Point `s-model` at a boolean and the checkbox toggles it. The `` is
visually hidden but still present, and the `.s-box` renders the tick when the
value is `true`.
```summit
agree =
```
```html
```
## A group bound to an array
When several checkboxes share one `s-model` and each carries a `value`, Summit
binds them to an array. Checking a box adds its value; unchecking removes it. The
order follows the order the boxes appear in the markup.
```summit
toppings =
```
```html
```
## A radio group
Radios use `.s-radio-opt`, which rounds the `.s-box` and fills it with a dot when
selected. Give every radio in the group the same `s-model` and a distinct
`value`; the model holds the one chosen value.
```summit
plan =
```
```html
```
## Accessibility
The styled box is purely visual. Because a real `` or
`` stays in the DOM, you keep native keyboard support out of
the box: focus with `Tab`, toggle a checkbox with `Space`, and move within a
radio group with the arrow keys. Screen readers announce the control's role and
checked state, and wrapping each control in its `