Checkbox

The controls exposed on the instance panel.

Prop	Type	Behaviour
checked	boolean	Whether the box starts ticked.
disabled	boolean	Blocks interaction and dims the control.
size	number	Box size in pixels.
border	boolean	Draws an outline around the box.
width	number	Outline width when border is on.
active	color	Outline colour in the checked state.
inactive	color	Outline colour when unchecked.
activeBG	color	Box fill when checked.
inactiveBG	color	Box fill when unchecked.
check	color	Tick mark colour.
hoverBG	color	Box fill while hovered.
focusRing	color	Focus ring for keyboard users.
thickness	number	Stroke weight of the tick.
radius	number	Corner radius of the box.
label	boolean	Whether the label is shown at all.
text	string	The label text itself.
side	enum	left or right — which side of the box the label sits on.
gap	number	Space between box and label.
fontSize	enum	Theme type step for the label.
weight	enum	Label font weight.
color	color	Label colour.
sizing	enum	fill stretches the control to its container; fit hugs the content.
truncate	number	Line count before the label is clipped; 0 never clips.
name	string	Field name used on form submission.
value	string	Value submitted when checked.
required	boolean	Marks the field as required in a form.
transition	transition	Animation used between states.
onToggle	event	Fires on every state change.
onCheck	event	Fires when it becomes checked.
onUncheck	event	Fires when it becomes unchecked.

Prop	Type	Behaviour
checked	boolean	Whether the box starts ticked.
disabled	boolean	Blocks interaction and dims the control.
size	number	Box size in pixels.
border	boolean	Draws an outline around the box.
width	number	Outline width when border is on.
active	color	Outline colour in the checked state.
inactive	color	Outline colour when unchecked.
activeBG	color	Box fill when checked.
inactiveBG	color	Box fill when unchecked.
check	color	Tick mark colour.
hoverBG	color	Box fill while hovered.
focusRing	color	Focus ring for keyboard users.
thickness	number	Stroke weight of the tick.
radius	number	Corner radius of the box.
label	boolean	Whether the label is shown at all.
text	string	The label text itself.
side	enum	left or right — which side of the box the label sits on.
gap	number	Space between box and label.
fontSize	enum	Theme type step for the label.
weight	enum	Label font weight.
color	color	Label colour.
sizing	enum	fill stretches the control to its container; fit hugs the content.
truncate	number	Line count before the label is clipped; 0 never clips.
name	string	Field name used on form submission.
value	string	Value submitted when checked.
required	boolean	Marks the field as required in a form.
transition	transition	Animation used between states.
onToggle	event	Fires on every state change.
onCheck	event	Fires when it becomes checked.
onUncheck	event	Fires when it becomes unchecked.

Guidance carried over from the component definition.

A single yes/no choice that stands on its own.

The choice needs a label the user can click.

You want the checked, hover, focus and disabled states handled for you.

The field posts a name and value with a form.

You need an indeterminate or tri-state box.

It is really a single choice among several — use RadioGroup.

The control reads better as an on/off toggle — use Switch.