Represents switching between two opposite states, commonly used for On/Off actions.

Basic Usage

<fx-switch
  v-model="value">
</fx-switch>
<fx-switch
  v-model="value"
  size="medium"
  tip="Tooltip text">
</fx-switch>
<fx-switch
  v-model="value"
  size="small">
</fx-switch>
<fx-switch
  v-model="value"
  size="mini"
  active-color="#13ce66"
  inactive-color="#ff4949">
</fx-switch>

Text Description

Extended Value Types

Disabled State

Attributes

Parameter	Description	Type	Optional Values	Default	PC/Mobile Support
value / v-model	Bound value	boolean / string / number	—	—	PC/Mobile
disabled	Whether disabled	boolean	—	false	PC/Mobile
width	Width of the switch (pixels)	number	—	40 (52 on mobile)	PC/Mobile
height	Height of the switch (pixels)	number	—	32	Mobile only
active-icon-class	Icon class shown when the switch is on; setting it ignores active-text	string	—	—	PC only
inactive-icon-class	Icon class shown when the switch is off; setting it ignores inactive-text	string	—	—	PC only
active-text	Text shown when the switch is on	string	—	—	PC only
inactive-text	Text shown when the switch is off	string	—	—	PC only
active-value	Value when the switch is on	boolean / string / number	—	true	PC only
inactive-value	Value when the switch is off	boolean / string / number	—	false	PC only
active-color	Background color when the switch is on	string	—	#409EFF	PC only
inactive-color	Background color when the switch is off	string	—	#C0CCDA	PC only
name	name attribute of the switch	string	—	—	PC only
validate-event	Whether form validation is triggered when the switch state changes	boolean	-	true	PC only
size	Switch component size	string	medium / small / mini	—	PC only
tip	Tooltip shown when hovering over the switch	string	—	—	PC only

Events

Event Name	Description	Callback Parameters	PC/Mobile Support
change	Callback when the switch state changes	New state value	PC/Mobile

Methods

Method Name	Description	Parameters	PC/Mobile Support
focus	Focus the Switch	-	PC only