# Checks, radios and switches The browser's own checkbox and radio, drawn by the library: `check`, `radio` and `switch` on the input itself, `form-check` on the label around it. ## Examples The class goes on the ``; the label wraps it, so a click anywhere on the words toggles it. ```html
Included
``` ### Radios Radios with one `name` are one choice; the arrow keys move it. ```html
Departure
``` ### Switches A switch is a checkbox with `role="switch"`: on or off, applied at once. One that cannot change keeps its focus with `aria-disabled="true"` and says why in a hint. ```html
Available with a partner license
``` ## States A check with some of its items chosen is `indeterminate` - a property set from script, as there is no attribute for it. ## Keyboard and accessibility - Space toggles a check or a switch; the arrow keys move the choice among radios of one `name`. - A set of checks or radios sits in a `
` whose `` names it. - The marks are drawn from the browser's own `:checked` and `:indeterminate`, and keep showing in forced colors and in print. - `aria-disabled="true"` keeps the control focusable and readable, so its hint can say why; the library ignores clicks and Space on it, as on a button so marked. ## Tokens From [`css/components/check.css`](https://github.com/redz-tech/REDZ.UI/blob/main/css/components/check.css), which declares no custom property of its own. It reads the theme's `--redz-border-strong`, `--redz-bg`, `--redz-primary-contrast`, `--redz-primary`, `--redz-focus`, `--redz-border`, `--redz-bg-page`, `--redz-bg-hover`, `--redz-motion`, `--redz-ease`. ## From Bootstrap 5.3 | Bootstrap 5.3 | REDZ.UI | Change | Note | | --- | --- | --- | --- | | `form-check-inline` | - | review | hstack gap-16 around the labels | | `form-check-input` | - | review | check, radio or switch on the input, by its type | | `form-check-label` | - | remove | the label is the form-check around the input | | `form-check-reverse` | - | missing | | | `form-switch` | - | review | switch on the input, with role="switch" |