Switch

Properties

Property	Type	Required	Default	Description
checked	boolean	No	-	Specifies whether the switch is checked.
disabled	boolean	No	false	Specifies whether to disable the switch.
loading	boolean	No	false	Specifies whether to show a loading indicator on the switch.
color	string	No	#1677ff	The background color when the switch is checked.
checkedText	string	No	-	The text to display when the switch is checked.
uncheckedText	string	No	-	The text to display when the switch is unchecked.
size	'medium' | 'small' | 'x-small'	No	medium	The size of the component.
controlled	boolean	No	false	Specifies whether the component is controlled.
mode	'normal' |'form'	No	'normal'	When used with the Form or FormItem component, set `mode` to `form`.
className	string	No	-	The class name.

Events

Event	Description	Type
onChange	Triggered when the switch is toggled.	( checked: boolean ) => void

Slots

Name	Description
checked	Content to display when the switch is checked.
unchecked	Content to display when the switch is unchecked.

Style classes

Class name	Description
amd-switch	The overall style.
amd-switch-checked	The style applied when the switch is checked.
amd-switch-disabled	The style when the switch is disabled.

Code examples

Basic usage

The following sample shows `index.axml` code:

<view>
  <demo-block title="Basic Usage">
    <switch 
      checked="{{false}}"
      onChange="handleChange" 
    />
  </demo-block>
  <demo-block title="With Default Value">
    <switch 
      checked="{{true}}"/>
  </demo-block>
  <demo-block title="Text and Icons">
    <switch 
      checkedText="On"
      uncheckedText="Off"/>
    <switch>
      <am-icon type="CheckOutline" slot="checked" size="x-small"/>
      <am-icon type="CloseOutline" slot="unchecked"  size="x-small"/>
    </switch>
  </demo-block>
  <demo-block title="Custom Color">
    <switch 
      checked="{{true}}"
      color="#00b578"/>
  </demo-block>
  <demo-block title="Disabled State">
    <switch 
      checked="{{true}}"
      disabled="{{true}}"/>
    <switch 
      disabled="{{true}}"/>
  </demo-block>
  <demo-block title="Loading State">
    <switch 
      loading="{{true}}"/>
  </demo-block>

  <demo-block title="Small Size">
    <switch  size="small" />
  </demo-block>
</view>

The following sample shows `index.js` code:

Page({
  data: {
    value: false,
  },
  handleChange(checked) {
    console.log('change checked', checked)
    my.alert({
      title: `The current switch is ${checked ? 'on' : 'off'}.`,
    });
  },

});

The following sample shows `index.acss` code:

.amd-switch {
  margin-right: 16rpx;
}

The following sample shows `index.json` code:

{
  "defaultTitle": "Switch",
  "usingComponents": {
    "switch": "antd-mini/es/Switch/index",
    "demo-block": "../../components/DemoBlock/index",
    "am-icon": "antd-mini/es/Icon/index"
  }
}