Switch

import { AXSwitchModule } from '@acorex/components/switch';

The Switch component is a sleek UI element for toggling between two states, like on and off. It offers smooth transitions, customization options (e.g., loading, disabled states), and adjustable colors and sizes, making it ideal for settings and binary input scenarios.

Overview

In this section, you can test different options of this component and see the output in real time

Color

Primary

Size

Readonly

Disabled

Value changed true

Usage

A simple example of using ax-switch

Preview

Code

Color

You can choose color of switch

Preview

Code

ON/OFF Content

With ax-switch-off-content or ax-switch-on-content you can show custom element for off/on state.

Preview

Code

Handler Content

With ax-switch-handler-content you can show element on switch handler.

Preview

Code

Handler ON/OFF Content

With ax-switch-handler-on-content or ax-switch-handler-off-content you can show element on switch handler depended on switch state

Preview

Code

Loading

You can use loading property for showing loading spinner in handler.

Preview

Code

Design Tokens

Design tokens are variables that define the visual style of ACoreX components. You can use them to change colors, typography, spacing, and other visual aspects.

Default component colors use system surface colors.

--ax-comp-switch-focus-visible-outline-color	var(--ax-sys-color-#{$name}-surface)	defines the color of the outline displayed when the switch component is focused and the focus is visibly emphasized. It enhances accessibility by providing a clear visual indicator for keyboard or focus navigation.
--ax-comp-switch-checked-bg-color	var(--ax-sys-color-#{$name}-surface)	this variable specifies the background color of the switch component when it is in the checked state. It visually indicates the active or enabled status of the switch.
--ax-comp-switch-handle-checked-bg-color	var(--ax-sys-color-on-#{$name}-surface)	this variable specifies the background color of the switch component when it is in the unchecked state. It visually represents the inactive or disabled status of the switch.
--ax-comp-switch-loading-color	var(--ax-sys-color-#{$name}-surface)	defines the color of the loading indicator displayed within or around the switch component. It is used to signify a loading or processing state, ensuring it is visually distinct and noticeable.
--ax-comp-switch-unchecked-bg-color	var(--ax-sys-color-light)	this variable specifies the background color of the switch component when it is in the 'unchecked' or 'off' state. It visually represents the inactive status of the switch.
--ax-comp-switch-handle-unchecked-bg-color	var(--ax-sys-color-light	defines the background color of the handle (toggle knob) when the switch component is in the 'unchecked' or 'off' state. It provides a distinct visual appearance to indicate the inactive status of the switch.