QSwitch 🔛
Allows to turn something on and off. Try a sandbox story
Examples
Types:
Props
modelValue
- type
Boolean | String | Number - default
false
The binding value
<q-switch v-model="model" />
1
activeValue / inactiveValue
- type
Boolean | String | Number - default
true
If you want use custom values instead of Boolean, you should set activeValue and inactiveValue:
Template:
<q-switch
v-model="currentValue"
active-value="on"
inactive-value="off"
@change="handleChange"
/>
1
2
3
4
5
6
2
3
4
5
6
Component instance:
export default {
setup() {
const currentValue = ref('on');
const handleChange = value => {
currentValue.value = value;
};
return { currentValue, handleChange };
}
};
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
Example:
disabled
- type
Boolean - default
false
Sets disabled switch state
Code example:
<q-switch
v-model="model"
disabled
/>
1
2
3
4
2
3
4
Examples:
loading
- Type:
Boolean - Default:
false
Set loading animation inside switch slider.
Template:
<q-switch
v-model="model"
:loading="loading"
@change="handleSwitcherChange"
/>
1
2
3
4
5
2
3
4
5
Component instance:
export default {
setup() {
const model = ref(false);
const loading = ref(false);
const handleSwitcherChange = () => {
loading.value = true;
// async request
setTimeout(() => {
loading.value = false;
}, 1000);
};
return {
model,
loading,
handleSwitcherChange
};
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Example:
validateEvent
- type
Boolean - default
false
If QSwitch wrapped in QFormItem, this prop defines if switch's change event will be validated immediately
<q-form
:model="model"
:rules="rules"
>
<q-form-item prop="switch">
<q-switch
v-model="model.switch"
active-value="on"
inactive-value="off"
validate-event
/>
</q-form-item>
</q-form>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
Events
update:modelValue
Triggers when model updates.
change
Alias for update:modelValue