Define colors per checkbox in checkboxgroup
How can I define custom colors per checkbox in a checkboxgroup? I have an hexcode per box along with the label and value. It shows the hexcode if i include it in the title, but it seems to error when setting indicator color through :ui syntax.
const categoryItems = computed<CheckboxGroupItem[]>(() => {
return allCategories.value.map((cat: any) => ({
label: cat.name,
value: cat.id.toString(),
ui: { indicator: bg-${cat.color} }
}))
})3 Replies
Hi @isakwang. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The knowledge sources do not explicitly document support for setting a custom color (such as a hex code) per checkbox in a
I'm sorry, but the knowledge sources do not provide enough information to confirm that you can define custom hex colors per checkbox in a
UCheckboxGroup using the ui prop or per-item ui overrides. The documented ui prop allows you to pass class names for various parts of the checkbox, including indicator, but there is no example or guarantee that dynamic Tailwind classes like bg-[${cat.color}] will work as expected, especially with arbitrary values or dynamic class generation in Nuxt UI.
From the API documentation, you can pass a ui object per item, and indicator is a valid key. However, if you use dynamic or arbitrary values (like bg-[#ff0000]), Tailwind's JIT engine may not pick up these classes unless they are safelisted or present in your source files. This can result in the class not being generated, or even errors if the syntax is not supported by the component or Tailwind configuration CheckboxGroup API.
Summary:
- You can try passing a ui object per item with an indicator class, but dynamic hex-based Tailwind classes may not work out of the box.
- If you need to support arbitrary hex colors, you may need to extend your Tailwind config to safelist those classes or use inline styles (which is not documented as supported in Nuxt UI).
- There is no official example or guarantee in the documentation that this approach will work.
Example from documentation (not with custom color):
But for bg-[${cat.color}], this is not documented as supported.
Conclusion:I'm sorry, but the knowledge sources do not provide enough information to confirm that you can define custom hex colors per checkbox in a
UCheckboxGroup using the ui prop and dynamic Tailwind classes. You may need to experiment or consult the Nuxt UI source code for further details CheckboxGroup API.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@234270188906741761> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
having added them to the theme config, it now works, but only if I use them in a div at the top of the template, The code up top is updated with the new syntax
@theme {
--color-region: #a3e635;
--color-protected-area: #38bdf8;
--color-sami: #fbbf24;
--color-kvaani: #ff8360;
}
I also only have to define them once per time the server starts for them to be recognized, but VS code autocomplete has them from the start
It seems like any specific property only works if it has been predefined too, so :class="border-${color} only works if that specific color has been defined as border earlier