Switch
Switch runtime: Root owns checked plus loading/disabled; Thumb only consumes context.
Runtime
State contracts come from @varo-ui/headless; rendered parts come from @varo-ui/h5/primitives or @varo-ui/weapp/primitives.
Demo
Basic usage
Use the Demo panel above to switch H5 and Weapp primitive preview/code; each runtime renders only the current entry.
Loading
Both loading and disabled close interaction; loading fits short async locks.
Parts
| Part | Purpose |
|---|---|
SwitchRoot | State and toggle |
SwitchThumb | Thumb part |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | undefined | undefined | Controlled checked state |
defaultChecked | boolean | false | Uncontrolled initial state |
disabled | boolean | false | Disabled |
loading | boolean | false | Loading; not toggleable |
as | string | 'button' | Root element tag |
Events
| Event | Payload | Description |
|---|---|---|
update:checked | boolean | Controlled sync |
checkedChange | boolean | State change |
Accessibility
- Root defaults to button semantics.
- Loading/disabled states are not toggleable.
Platform notes
- Both runtimes share checked/loading contracts.
- Track visuals and motion belong to UI wrappers. :::