Introduction

The switch component is used to toggle a feature on/off. It supports multiple types, statuses, and sizes, and is suitable for forms, settings, and other scenarios.

Usage

Local import — configure it in the index.json of the page or component that needs it:

"usingComponents": {
  "fs-switch": "ava-ui/fxui/fs-switch/index"
}

Code demos

Types (type property)

• default: Standard switch
• text: Switch with text (ON/OFF)
• icon: Switch with icon

Sizes (size property)

• mini: Height 18px, suitable for compact scenarios
• medium: Height 30px, suitable for general scenarios

Statuses (status property)

• default: Normal
• loading: Loading (cannot be toggled)
• disabled: Disabled (cannot be toggled)

Code example

---

API

Properties

Property	Description	Type	Optional values	Default
checked	Whether selected	boolean	true / false	false
type	Type	string	default/text/icon	default
status	Status	string	default/loading/disabled	default
size	Size	string	mini/medium	mini
checkedText	Text when selected	string	-	"ON"
uncheckedText	Text when not selected	string	-	"OFF"
checkedIcon	Icon when selected	string	-	"checkmark"
uncheckedIcon	Icon when not selected	string	-	"guanbi2"

Events

Event name	Description	Callback parameters
change	Fires when the state toggles

Slot

None

---

Icon notes

• The checkedIcon and uncheckedIcon properties accept icon names from the fxui/common_css/iconfont font library, such as checkmark, guanbi2, star, jinbi, etc.
• You can also customize the icon via a slot (if extension is needed).

---

Preview

打开预览