Chapter 4 › Lesson 19

19. Build Radio Button and Checkbox Components

Skills: Radio button: circle with selected/unselected variants; Checkbox: square with checked/unchecked variants; Boolean property for checked state; Label text property

Radio buttons (for single selection) and checkboxes (for multiple selection) are form fundamentals. You'll create both as components with boolean properties for the checked state.

Step-by-step

1. Create a radio button: press O and draw a 24×24 circle, fill white, stroke #c8c6bd
2. Add a smaller filled circle inside (12×12, fill #1a56db) — this appears when selected
3. Select both circles and press Ctrl + Alt + K to create a component
4. Add a boolean property called "Checked". When Checked = True: show the inner circle, change the outer stroke to #1a56db. When False: hide the inner circle, keep grey stroke
5. Add a text layer to the right of the radio circle (a text property called "Label")
6. Repeat for checkbox: use a 20×20 rounded rect (rx: 4) instead of a circle. For the checked state, fill the square with #1a56db and add a white ✓ text centered inside
7. Wrap both the radio/checkbox and the label in an auto layout frame (Horizontal, gap: 8, alignment: Center)
8. Group the whole thing as a component with a boolean "Checked" property and a text "Label" property