Astryx Design System

Usage

A toggle control for on/off states that take effect immediately. Supports labels, descriptions, loading states, and validation. Use it for settings or preferences that apply instantly. For changes requiring a form submission, use a checkbox instead.

ts
import {Switch} from '@astryxdesign/core/Switch'

Best practices

Guidance	Practices
Do	Use for settings that apply immediately; the toggle should take effect without a separate save action.
Do	Pair with a clear, concise label that describes the setting being controlled.
Don't	Use for options that require a form submission to take effect; use a checkbox instead.
Don't	Use a switch for multi-state values; it's strictly on/off.

Examples

Common configurations, variations, and states.

Switch — Disabled

Disabled switch with label and description for gated features.

Switch — Settings Panel

Settings panel with spread-spaced switches in a card.

Switch — With Description

Toggle with a label and supporting description text.

Switch — With Status

Switches with error, warning, and success validation states.