Checkbox

ic.Checkbox is a boolean toggle that stores its state as "on" or "off". It supports an indeterminate third state for “select all” patterns, and you can replace the default checkmark with any ic.Icon if you need something more expressive (a star for favorites, a flag for bookmarks, etc.).

Variants

Variant controls the fill color when checked. Use primary for standard selections, secondary when the checkbox sits in a busy layout and needs less visual weight, and destructive when toggling something irreversible or dangerous. All three look the same when unchecked.

Size and label

Size scales the checkbox box and its label text together so they stay proportional. You can place the label on either side of the box with LabelPosition, which is useful when aligning a column of checkboxes against a left or right edge.

Indeterminate state

Setting Indeterminate to true shows a horizontal dash instead of a checkmark, which is the standard visual cue for “select all” checkboxes when only some children are checked. The state clears automatically on the next user click.

Custom icon

You can replace the default checkmark with any ic.Icon by adding it as a child. This is useful for things like favorite toggles, priority flags, or any situation where a plain checkmark does not communicate the meaning well enough.

Events

Checkbox fires a ValueChanged event each time the user toggles it, carrying the new value ("on" or "off") in the payload. In MATLAB, attach a listener with addlistener and read the value from evt.Data.value.

Custom styling

Every component exposes a .css property that lets you inject instance-level CSS directly from MATLAB. Here is a round, golden “favorite” checkbox as an example. The selectors target .ic-checkbox__box and its checked modifier to override the shape and color.

cb = ic.Checkbox("Label", "Favorite", "Size", "lg");
cb.Icon = ic.Icon("Source", "star");

cb.css.style(".ic-checkbox__box", ...
    "border_radius", "50%", ...
    "width", "22px", ...
    "height", "22px");

cb.css.style(".ic-checkbox__box.ic-checkbox__box--checked", ...
    "background_color", "#f59e0b", ...
    "box_shadow", "0 2px 8px rgba(245, 158, 11, 0.4)");