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...
공식 문서 열기Preview
This setting applies immediately.
This demo keeps the setting locked.
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.