primevue
primevue copied to clipboard
TriStateCheckbox: should allow icons to be customized
Describe the feature you would like to see added
It would be great if the icons for the states of the TriStateCheckbox could be customized.
Is your feature request related to a problem?
The TriStateCheckbox seems like it would be useful for showing an indeterminate state (a feature which is supported by native checkboxes and also the checkboxes in the TreeSelect component) but it's not possible to change the TriStateCheckbox to show a minus icon.
Describe the solution you'd like
A prop that let's you set specific icons for each state.
Describe alternatives you have considered
I've worked around it for now with CSS, not the cleanest solution but it works as long as icon codes don't change.
.indeterminate :deep(.pi-times:before) {
content: '\e90f';
}
Additional context
No response
I am looking for this myself now. I have a tree of checkboxes, so I need to show that a parent checkbox is neither selected nor unselected. (exactly like the PrimeVue TreeSelect component does)
It would be nice if the checkbox had a prop called indeterminate
which gave it the horizontal line icon inside the checkbox.
<script setup>
import { reactive, ref } from 'vue';
import Checkbox from 'primevue/checkbox';
const some = reactive({
field: false,
});
const isSomeIssue = ref(true);
</script>
<template>
<Checkbox
v-model="some.field"
binary
:indeterminate="isSomeIssue"
/>
</template>
This is how Oruga UI does it (https://oruga.io/components/checkbox.html).
Not a pretty solution but I worked around it for now by overriding the icon to a minus symbol in CSS
<TriStateCheckbox class="indeterminate" ... />
.indeterminate :deep(.pi-times:before) {
content: '\e90f';
}
I think that's a good solution to sidestep the problem.
I was able to get my tree of checkboxes working with good UX without the indeterminate state. That is to say I'm too lazy to go back and refactor all my logic to see if I can add it. Yesterday I would have :)
This functionality will be added to the upcoming version.