전체 카탈로그
Data InputSwitch20 props

Switch

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 ins...

공식 문서 열기
live previewData Input

Preview

This setting applies immediately.

Import

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

Astryx 문서 권장 방식대로 root barrel이 아니라 컴포넌트 subpath에서 가져옵니다.

When to use

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 ins...

switchtoggleonoffflipswitchbooleantoggleswitch

Important props

changeAction(checked: boolean, e: ChangeEvent<HTMLInputElement>) => void | Promise<void>optional
labelPositionstart | endoptional
labelSpacingdefault | spreadoptional

Theming targets

astryx-switchastryx-switch-thumbastryx-switch-field

Best practices

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