Checkbox & Radio

1. Build two component sets, Checkbox and Radio, each with a Type property (the square box vs the round button) drawn as vector layers so the checked mark and the inner dot can be toggled cleanly.
2. Add a State property covering Unchecked, Checked, Indeterminate (checkbox only, a dash), Focused, and Disabled, plus a boolean for the focus ring.
3. Expose the box outline, the checked fill, and the mark color as variables bound to the page accent so a themed page can restyle them in one place.
4. Compose a Row component that pairs the control with a label in an Auto Layout frame, with the control pinned left and generous row padding so the whole row reads as the target.

Keep the indeterminate dash as its own State value on the checkbox only; a radio has no mixed state, so do not let the property leak across the two sets.

1. Make a Group frame in vertical Auto Layout: a legend text at top stating the question, an optional hint line ('Select all that apply' for checkboxes), then the stacked control rows.
2. Instance your Checkbox or Radio rows inside, one option per line, ordered logically, and add an 'Other' row with an attached text-field instance where the options cannot be comprehensive.
3. For a radio group, pre-select a default option or include an explicit 'None / No preference' row, and annotate that a user cannot clear a radio set.
4. Annotate the developer handoff: radios share one name and are a single Tab stop navigated by arrow keys; checkboxes are individual Tab stops toggled with Space.

Treat the legend as the real label of the group, not decoration; it is what a screen reader pairs with every option inside, so write it as the answerable question.

1. Lay out a parent checkbox over a list of child checkboxes; with variants and interactive components, wire the parent's three states (all, none, some = indeterminate) to the children's combined state.
2. Set the parent's click to check or uncheck every child at once, and a child's click to recompute the parent toward checked, unchecked, or the dash.
3. For radios, use a single-select variant set so clicking one option deselects the rest, mirroring real exclusivity.
4. Caption the frame that Figma cannot model the arrow-key roving selection or Space toggle, so the keyboard behavior must be specified for the build rather than shown.

Figma prototypes only model pointer clicks, so annotate the keyboard model (Space for a checkbox, arrows for a radio group) instead of implying clicking is the whole interaction.