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" />

activeValue

• type 'Boolean' | 'String' | 'Number'
• default true

Defines value for active QSwitch state

<q-switch active-value="on" />

inactiveValue

• type 'Boolean' | 'String' | 'Number'
• default false

Defines value for inactive QSwitch state

<q-switch active-value="off" />

disabled

• type Boolean
• default false

Sets disabled switch state

Code example:

<q-switch
  v-model="model"
  disabled
/>

Result:

loading

• Type: Boolean
• Default: false

Set loading animation inside switch slider

Code example:

<q-switch
  v-model="model"
  loading
/>

Result:

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>

Events

update:modelValue

Triggers when model updates.

change

Alias for update:modelValue