Checkbox

A checkbox is an essential user interface component that enables users to make binary choices, such as selecting or deselecting options. It is commonly used for tasks like toggling settings, selecting multiple items, or confirming agreements within an application.

Example

Below is an example showcasing two checkbox components. The checkbox on the left is in its initial, unchecked state, while the one on the right displays a checked checkbox.

import "spatial-design-system/primitives/ar-checkbox.js";

<a-ar-checkbox
    position="-0.5 1.6 -3"
    size="extra-large"
></a-ar-checkbox>

Props

Property	Type	Default	Description
visible	boolean	true	Controls the checkbox's visibility. When true, the checkbox is visible; when false, it is hidden.
size	enum (small, medium, large, extra-large)	medium	Sets the checkbox's size, adjusting padding, font size, and layout compactness accordingly.
position	number[]	0 0 0	Specifies the checkbox's position.
primary	string (blue, #fff)	#00BA92	Defines the primary color of the checkbox (affecting text, background, icon background).
value	boolean	false	Specifies whether the checkbox is checked.
variant	string (light, dark)	""	Sets the button's color scheme mode, either "light" or "dark," for visual theme consistency.

Events

The checkbox component emits the following event when interacted with:

Event	Parameters	Description
value-changed	{ value: boolean }	Emitted when the checkbox is toggled. Returns the new checked state.

Note

You can listen to the value-changed event to react whenever the checkbox state changes.

el.addEventListener("value-changed", (event) => {
  console.log(event.detail.value);
});