Switch

The switch component is an UI element designed to allow users to toggle between two states, such as on/off or enabled/disabled. Its visual and intuitive representation of state changes makes it well-suited for settings, preferences and simillar dual options.

Example

Below is an example of the switch component.

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

<a-ar-switch
    position="0 1.6 -3"
    size="large"
    value="true"
    inset="true"
></a-ar-switch>

Props

Property	Type	Default	Description
visible	boolean	true	Controls the switch's visibility. When true, the switch is visible; when false, it is hidden.
size	enum (small, medium, large, extra-large)	medium	Sets the switch's size, adjusting padding, font size, and layout compactness accordingly.
position	number[]	0 0 0	Specifies the switch's position.
primary	string (blue, #fff)	#00BA92	Defines the primary color of the switch (affecting text, background, icon background).
value	boolean	false	Indicates whether the switch is in the "on" state.
variant	string (light, dark)	""	Sets the button's color scheme mode, either "light" or "dark," for visual theme consistency.
opacity	number	1	Sets switch's opacity.
inset	boolean	false	Controls the appearance of the switch. When set to true, the the thumb (toggle handle) is contained within the bar. When false, the thumb extends beyond the bar, creating a larger, overlapping effect.