Switch API
This page provides an overview of the Switch component API, detailing its props, emits, slots, and exposed methods/states.
Props
The Switch component accepts the following props:
| Prop | Default | Type | Description |
|---|---|---|---|
mode | "none" | SwitchMode | The styling mode of the switch. |
rounded | 9999 | 1 or 2 or 3 or 4 or 5 or 6 or 7 or 8 or 9 or 10 or number or "full" | Rounding of the switch corners. |
iconActive | undefined | IconsProps["type"] | Icon displayed when the switch is active. |
iconInactive | undefined | IconsProps["type"] | Icon displayed when the switch is inactive. |
switchingType | "checkbox" | "checkbox" or "switch" or string | The type of switching mechanism. |
id | undefined | string or undefined | Unique identifier for the switch component. |
modelValue | undefined | boolean or null or undefined | The current value of the switch. |
label | "" | string or undefined | The label displayed next to the switch. |
disabled | false | boolean or undefined | Disables the switch if set to true. |
help | undefined | string or undefined | Help text displayed below the switch. |
required | false | boolean or undefined | Indicates whether the switch is required. |
class | undefined | StyleClass or undefined | Custom CSS class for the switch container. |
Emits
The Switch component emits the following events:
| Emit | Payload | Description |
|---|---|---|
update:modelValue | boolean | Emitted when the modelValue is updated. |
updateModelValue | boolean | Alias for update:modelValue event. |
change:modelValue | boolean | Emitted when the value of the switch changes. |
Slots
The Switch component provides the following slots:
| Slot | Payload | Description |
|---|---|---|
default | VNode[] | Default slot for custom content inside the switch component. |
Expose
The Switch component exposes the following methods and states via ref:
| Expose | Value | Description |
|---|---|---|
id | SwitchProps["id"] | Unique identifier for the switch component. |
mode | SwitchProps["mode"] | The current styling mode of the switch. |
label | SwitchProps["label"] | The label displayed next to the switch. |
rounded | SwitchProps["rounded"] | The rounding of the switch corners. |
isDisabled | SwitchProps["disabled"] | Indicates whether the switch is disabled. |
isRequired | SwitchProps["required"] | Indicates whether the switch is required. |
iconActive | SwitchProps["iconActive"] | The icon displayed when the switch is active. |
iconInactive | SwitchProps["iconInactive"] | The icon displayed when the switch is inactive. |
switchingType | SwitchProps["switchingType"] | The type of switching mechanism. |
classBaseSwitch | StyleClass | Custom CSS class for the base switch container. |
classSwitch | StyleClass | Custom CSS class for the switch element. |
Methods:
inputEvent(value: boolean): void- Handles input events for toggling the switch.