Open Natchii59 opened 1 month ago
<v-switch :model-value="true" color="primary" disabled base-color="primary" />
add base-color="primary"
Maybe this can help you.
Thanks for the suggestion This will indeed apply the primary color in disabled state, but it will be applied whether the switch is checked or not.
So a possible workaround would be
<v-switch :model-value="myVar" color="primary" disabled :base-color="myVar ? 'primary' : null" />
Which isn't ideal
We have this for buttons but not form inputs for some reason.
Environment
Vuetify Version: 3.7.2 Vue Version: 3.5.8 Browsers: Chrome 129.0.0.0 OS: Mac OS 10.15.7
Steps to reproduce
Create a VSwitch component with a
color
attribute (example: primary), with:model-value="true"
and withdisabled
Expected Behavior
The VSwitch component should apply the primary color when disabled.
Actual Behavior
It doesn't apply the color and is displayed as gray.
Reproduction Link
https://play.vuetifyjs.com/#eNqlj80KAjEMhF+l9Oza+1IFn8N6qG3AQtqG9EdEfHfXqiBe9xIyH8wwc7zLwk4diLa9gZylrhAJbYW9SULoPlmi8Q7hcqo2JOAPGrBcQ3UXMcfsAaduscHOyMoNjBQuY+ZFEodo+bYQH4o9I3ihVoR8vVr9l3qRd2etfrbIxyY1xHFOTy+AUgQ=
Other comments
The Material design specification has examples of disabled components, and there is a Switch which has the primary color and is disabled. https://m2.material.io/design/interaction/states.html#disabled
Vuetify docs with examples: https://vuetifyjs.com/en/components/switches/#states