Skip to main content
Version: Next

Switch

Switch picker.

Reference

Type

ComponentType<SwitchProps>

Examples

export default class PageView extends Component {
constructor() {
super(...arguments)
}

render() {
return (
<View className='components-page'>
<Text>default style</Text>
<Switch checked/>
<Switch/>
<Text>recommend style</Text>
<Switch checked/>
<Switch/>
</View>
)
}
}

SwitchProps

PropertyTypeDefaultRequiredDescription
checkedbooleanfalseNoSpecifies whether the item is selected
disabledbooleanfalseNoSpecifies whether to disable the component.
type"switch" | "checkbox""switch"NoThe style. Valid values include `switch` and `checkbox`.
colorstring"#04BE02"NoThe color of the switch component. It is the same as the color of the css component.
onChangeBaseEventOrigFunction<onChangeEventDetail>NoA change event triggered when checked changes.

Property Support

PropertyWeChat Mini-ProgramBaidu Smart-ProgramAlipay Mini-ProgramByteDance Micro-AppH5React Native
SwitchProps.checked✔️✔️✔️✔️✔️✔️
SwitchProps.disabled✔️✔️
SwitchProps.type✔️✔️✔️✔️✔️✔️
SwitchProps.color✔️✔️✔️✔️✔️✔️
SwitchProps.onChange✔️✔️

onChangeEventDetail

ParamType
valueboolean

API Support

APIWeChat Mini-ProgramBaidu Smart-ProgramAlipay Mini-ProgramByteDance Micro-AppH5React Native
Switch✔️✔️✔️✔️✔️✔️