Choices.js w/ DaisyUI styling

[NikarashiHatsu]

Hey everyone, I wanted to share what I've been working on for the past hour. I've been diving into this thing for several reasons, but primarily because I found a limited selection of visually appealing libraries like Select2, Choices.js, and Tom Select that meet my specific requirements, specifically when it is paired with Tailwind CSS. Therefore, I took it upon myself to create one that fits.

Please feel free to give it a try, and I hope it meets your expectations!

The CSS file

.choices {
    @apply relative overflow-hidden;
}

.choices:focus {
    @apply outline-0;
}

.choices:last-child {
    @apply mb-0;
}

.choices.is-open {
    @apply overflow-visible;
}

.choices.is-disabled .choices__inner,.choices.is-disabled .choices__input {
    @apply bg-base-200 cursor-not-allowed select-none;
}

.choices.is-disabled .choices__item {
    @apply cursor-not-allowed;
}

.choices [hidden] {
    @apply !hidden;
}

.choices[data-type*=select-one] {
    @apply cursor-pointer;
}

.choices[data-type*=select-one] .choices__input {
    @apply w-full ring-transparent ring-0 border-0 border-b border-b-base-300;
}

.choices[data-type*=select-one] .choices__button {
    @apply w-2 ml-0 p-2 bg-center;

    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
    background-size: 8px;
}

.choices[data-type*=select-one] .choices__button:focus,.choices[data-type*=select-one] .choices__button:hover {
    @apply opacity-100;
}

.choices[data-type*=select-one] .choices__button:focus {
    box-shadow: 0 0 0 2px #00bcd4
}

.choices[data-type*=select-one] .choices__item[data-value=""] .choices__button {
    @apply hidden;
}

.choices[data-type*=select-one].is-open::after {
    border-color: transparent transparent #333;
    margin-top: -7.5px
}

.choices[data-type*=select-one][dir=rtl]::after {
    @apply left-3 right-auto;
}

.choices[data-type*=select-one][dir=rtl] .choices__button {
    @apply left-0 right-auto ml-6 mr-0;
}

.choices[data-type*=select-multiple] .choices__inner,.choices[data-type*=text] .choices__inner {
    @apply cursor-text;
}

.choices[data-type*=select-multiple] .choices__button,.choices[data-type*=text] .choices__button {
    @apply relative inline-block w-2;

    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
    background-size: 8px;
}

.choices[data-type*=select-multiple] .choices__button:focus,.choices[data-type*=select-multiple] .choices__button:hover,.choices[data-type*=text] .choices__button:focus,.choices[data-type*=text] .choices__button:hover {
    @apply opacity-100;
}

.choices__inner {
    @apply border px-3 py-2 rounded-lg border-base-300;
}

.choices__inner:has(select) {
    @apply select select-bordered w-full;
}

.choices:has(select) .choices__input {
    @apply inline-block text-sm border-0 px-3 ring-0 border-base-300 py-2 !ring-transparent;
}

.is-open .choices__inner {
    @apply border rounded-t-lg rounded-b-none;
}

.is-flipped.is-open .choices__inner {
    @apply rounded-b-lg;
}

.choices__list {
    @apply m-0 pl-0 list-none;
}

.choices__list--single {
    @apply flex flex-col justify-center w-full;
}

[dir=rtl] .choices__list--single {
    @apply pl-4 pr-2;
}

.choices__list--single .choices__item {
    @apply w-full flex items-center justify-between;
}

.choices__list--multiple {
    @apply inline;
}

.choices__list--multiple .choices__item {
    @apply badge badge-primary rounded-lg mr-1 break-all box-border inline-flex justify-center items-center;
}

.choices__list--multiple .choices__item[data-deletable] {
    @apply pr-2;
}

[dir=rtl] .choices__list--multiple .choices__item {
    @apply mr-0 ml-1;
}

.choices__list--multiple .choices__item.is-highlighted {
    @apply badge-secondary;
}

.is-disabled .choices__list--multiple .choices__item {
    @apply opacity-50;
}

.choices__list--dropdown,.choices__list[aria-expanded] {
    @apply invisible z-[1] absolute w-full border top-full -mt-px overflow-hidden break-all will-change-auto;
}

.is-open .choices__list--dropdown,.is-open .choices__list[aria-expanded] {
    @apply border-base-300;
}

.is-active.choices__list--dropdown,.is-active.choices__list[aria-expanded] {
    @apply visible;
}

.is-open .choices__list--dropdown,.is-open .choices__list[aria-expanded] {
    @apply border-base-300 rounded-b-lg;
}

.is-flipped .choices__list--dropdown,.is-flipped .choices__list[aria-expanded] {
    @apply bottom-full mt-0 -mb-px;
}

.choices__list--dropdown .choices__list,.choices__list[aria-expanded] .choices__list {
    @apply relative max-h-[300px] overflow-auto will-change-auto;
}

.choices__item--choice.is-selected {
    @apply bg-base-200;
}

.choices__list--dropdown .choices__item,.choices__list[aria-expanded] .choices__item {
    @apply transition duration-300 ease-in-out text-sm px-4 py-2 hover:bg-base-200;
}

[dir=rtl] .choices__list--dropdown .choices__item,[dir=rtl] .choices__list[aria-expanded] .choices__item {
    @apply text-right;
}

@media (min-width: 640px) {
    .choices__list--dropdown .choices__item--selectable,.choices__list[aria-expanded] .choices__item--selectable {
        @apply pr-[100px];
    }

    .choices__list--dropdown .choices__item--selectable::after,.choices__list[aria-expanded] .choices__item--selectable::after {
        @apply text-xs opacity-0 absolute right-2 top-1/2 -translate-y-1/2;

        content: attr(data-select-text);
    }

    [dir=rtl] .choices__list--dropdown .choices__item--selectable,[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable {
        @apply text-right pl-[100px] pr-2;
    }

    [dir=rtl] .choices__list--dropdown .choices__item--selectable::after,[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable::after {
        @apply right-auto left-2;
    }
}

.choices__input {
    @apply inline-block text-sm border-0 px-1 ring-0 border-base-300 py-[0.315rem] !ring-transparent;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    @apply bg-base-200;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted::after,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after {
    @apply opacity-50;
}

.choices__item {
    @apply cursor-default;
}

.choices__item--selectable {
    @apply cursor-pointer;
}

.choices__item--disabled {
    @apply cursor-not-allowed select-none opacity-50;
}

.choices__heading {
    @apply font-medium text-xs p-2 border-b border-base-300;
}

.choices__button {
    @apply -indent-[9999px] appearance-none border-0 bg-transparent cursor-pointer bg-no-repeat h-2 ml-2;
}

.choices__button:focus,.choices__input:focus {
    @apply outline-0;
}

.choices__input::-webkit-search-cancel-button,.choices__input::-webkit-search-decoration,.choices__input::-webkit-search-results-button,.choices__input::-webkit-search-results-decoration {
    @apply hidden;
}

.choices__input::-ms-clear,.choices__input::-ms-reveal {
    @apply hidden w-0 h-0;
}

[dir=rtl] .choices__input {
    @apply pr-1 pl-0;
}

.choices__placeholder {
    @apply opacity-50;
}

The CSS file (updated after the issue @Luzefiru provided below)

.choices {
    @apply relative overflow-hidden;
}

.choices:focus {
    @apply outline-0;
}

.choices:last-child {
    @apply mb-0;
}

.choices.is-open {
    @apply overflow-visible;
}

.choices.is-disabled .choices__inner,.choices.is-disabled .choices__input {
    @apply bg-base-200 cursor-not-allowed select-none;
}

.choices.is-disabled .choices__item {
    @apply cursor-not-allowed;
}

.choices [hidden] {
    @apply !hidden;
}

.choices[data-type*=select-one] {
    @apply cursor-pointer;
}

.choices[data-type*=select-one] .choices__input {
    @apply w-full ring-transparent ring-0 border-0 border-b border-b-base-300;
}

.choices[data-type*=select-one] .choices__button {
    @apply w-2 ml-0 p-2 bg-center;

    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
    background-size: 8px;
}

.choices[data-type*=select-one] .choices__button:focus,.choices[data-type*=select-one] .choices__button:hover {
    @apply opacity-100;
}

.choices[data-type*=select-one] .choices__button:focus {
    box-shadow: 0 0 0 2px #00bcd4
}

.choices[data-type*=select-one] .choices__item[data-value=""] .choices__button {
    @apply hidden;
}

.choices[data-type*=select-one].is-open::after {
    border-color: transparent transparent #333;
    margin-top: -7.5px
}

.choices[data-type*=select-one][dir=rtl]::after {
    @apply left-3 right-auto;
}

.choices[data-type*=select-one][dir=rtl] .choices__button {
    @apply left-0 right-auto ml-6 mr-0;
}

.choices[data-type*=select-multiple] .choices__inner,.choices[data-type*=text] .choices__inner {
    @apply cursor-text inline-table;
}

.choices[data-type*=select-multiple] .choices__button,.choices[data-type*=text] .choices__button {
    @apply relative inline-block w-2;

    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
    background-size: 8px;
}

.choices[data-type*=select-multiple] .choices__button:focus,.choices[data-type*=select-multiple] .choices__button:hover,.choices[data-type*=text] .choices__button:focus,.choices[data-type*=text] .choices__button:hover {
    @apply opacity-100;
}

.choices__inner {
    @apply border px-3 py-2 rounded-lg border-base-300;
}

.choices__inner:has(select) {
    @apply select select-bordered w-full;
}

.choices:has(select) .choices__input {
    @apply inline-block text-sm border-0 px-3 ring-0 border-base-300 py-2 !ring-transparent;
}

.choices:has(select[multiple]) .choices__input {
    @apply px-0 py-0;
}

.is-open .choices__inner {
    @apply border rounded-t-lg rounded-b-none;
}

.is-flipped.is-open .choices__inner {
    @apply rounded-b-lg;
}

.choices__list {
    @apply m-0 pl-0 list-none bg-base-100;
}

.choices__list--single {
    @apply flex flex-col justify-center w-full;
}

[dir=rtl] .choices__list--single {
    @apply pl-4 pr-2;
}

.choices__list--single .choices__item {
    @apply w-full flex items-center justify-between;
}

.choices__list--multiple {
    @apply inline;
}

.choices__list--multiple .choices__item {
    @apply badge badge-primary rounded-lg mr-1 break-all box-border inline-flex inline-table;
}

.choices__list--multiple .choices__item[data-deletable] {
    @apply pr-2;
}

[dir=rtl] .choices__list--multiple .choices__item {
    @apply mr-0 ml-1;
}

.choices__list--multiple .choices__item.is-highlighted {
    @apply badge-secondary;
}

.is-disabled .choices__list--multiple .choices__item {
    @apply opacity-50;
}

.choices__list--dropdown,.choices__list[aria-expanded] {
    @apply invisible z-[1] absolute w-full border top-full -mt-px overflow-hidden break-all will-change-auto;
}

.is-open .choices__list--dropdown,.is-open .choices__list[aria-expanded] {
    @apply border-base-300;
}

.is-active.choices__list--dropdown,.is-active.choices__list[aria-expanded] {
    @apply visible;
}

.is-open .choices__list--dropdown,.is-open .choices__list[aria-expanded] {
    @apply border-base-300 rounded-b-lg;
}

.is-flipped .choices__list--dropdown,.is-flipped .choices__list[aria-expanded] {
    @apply bottom-full mt-0 -mb-px;
}

.choices__list--dropdown .choices__list,.choices__list[aria-expanded] .choices__list {
    @apply relative max-h-[300px] overflow-auto will-change-auto;
}

.choices__item--choice.is-selected {
    @apply bg-base-200;
}

.choices__list--dropdown .choices__item,.choices__list[aria-expanded] .choices__item {
    @apply transition duration-300 ease-in-out text-sm px-4 py-2 hover:bg-base-200;
}

[dir=rtl] .choices__list--dropdown .choices__item,[dir=rtl] .choices__list[aria-expanded] .choices__item {
    @apply text-right;
}

@media (min-width: 640px) {
    .choices__list--dropdown .choices__item--selectable,.choices__list[aria-expanded] .choices__item--selectable {
        /* @apply pr-[100px]; */
    }

    .choices__list--dropdown .choices__item--selectable::after,.choices__list[aria-expanded] .choices__item--selectable::after {
        @apply text-xs opacity-0 absolute right-2 top-1/2 -translate-y-1/2;
    }

    [dir=rtl] .choices__list--dropdown .choices__item--selectable,[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable {
        @apply text-right pl-[100px] pr-2;
    }

    [dir=rtl] .choices__list--dropdown .choices__item--selectable::after,[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable::after {
        @apply right-auto left-2;
    }
}

.choices__input {
    @apply inline-block text-sm border-0 px-1 ring-0 border-base-300 py-[0.315rem] !ring-transparent;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    @apply bg-base-200;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted::after,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after {
    @apply opacity-50;
}

.choices__item {
    @apply cursor-default;
}

.choices__item--selectable {
    @apply cursor-pointer;
}

.choices__item--disabled {
    @apply cursor-not-allowed select-none opacity-50;
}

.choices__heading {
    @apply font-medium text-xs p-2 border-b border-base-300;
}

.choices__button {
    @apply -indent-[9999px] appearance-none border-0 bg-transparent cursor-pointer bg-no-repeat h-2 ml-2;
}

.choices__button:focus,.choices__input:focus {
    @apply outline-0;
}

.choices__input::-webkit-search-cancel-button,.choices__input::-webkit-search-decoration,.choices__input::-webkit-search-results-button,.choices__input::-webkit-search-results-decoration {
    @apply hidden;
}

.choices__input::-ms-clear,.choices__input::-ms-reveal {
    @apply hidden w-0 h-0;
}

[dir=rtl] .choices__input {
    @apply pr-1 pl-0;
}

.choices__placeholder {
    @apply opacity-50;
}

There are certain aspects that I haven't had the opportunity to test yet as they primarily relate to edge cases. However, if you're interested in contributing, I've prepared a checklist detailing what has been tested and what remains to be explored:

• Single select input
• Multiple select input
• Text input
• RTL support
• Multiple select disabled state
• Option Group
• Custom Templates

[Luzefiru]

One edge case I found is that the following class

.choices__inner:has(select) {
    @apply select select-bordered w-full;
}

limits the height and doesn't allow it to expand the selection container.

EDIT

Adding h-fit to the CSS selector solves this.

  .choices__inner:has(select) {
    @apply w-full select select-bordered h-fit;
  }

[NikarashiHatsu]

I noticed this as well as I'm using this package in production recently.
I'll update some tweaks today, let me know if there's more issues regarding the styling.

[Luzefiru]

Thanks! I'll be sure to note down some nuances I find while using it.

Here's another: borders on the dropdown menu seems to be inconsistent on dark theme.

[Luzefiru]

The search input field does not fully contain all the text. This is because Choices.js automatically resizes the input container based on the amount of text inside it.

[NikarashiHatsu]

Hi @Luzefiru! Sorry for the late reply, has been busy on another project lately, but here's my styling workaround. Hope it fix your issues:

.choices[data-type*=select-multiple] .choices__inner,.choices[data-type*=text] .choices__inner {
-    @apply cursor-text;
+    @apply cursor-text inline-table;
}

.choices__list--multiple .choices__item {
-    @apply badge badge-primary rounded-lg mr-1 break-all box-border inline-flex justify-center items-center;
+    @apply badge badge-primary rounded-lg mr-1 break-all box-border inline-flex inline-table;
}

+.choices:has(select[multiple]) .choices__input {
+    @apply px-0 py-0;
+}

.choices__list {
-    @apply m-0 pl-0 list-none;
+    @apply m-0 pl-0 list-none bg-base-100;
}

[Luzefiru]

The text input visibility is fixed now, thanks @NikarashiHatsu!

[rubenuijtdewilligen]

Thank you! This is awesome. My use case is selecting which groups of users have access to a specific item in my saas.

[bsiebens]

This is exactly what I was lookin for. Thanks! Looks great, but for some reason the edges are not curved for me.

I included the css in my main css file and see all the styling in my output, yet for some reason the curves of the dropdown are not the same as for the the standard DaisyUI dropdown. Any thoughts?

[bsiebens]

So figured it out, I had the style include in the @layer section, which caused them to not be included. Now only to solve the double dropdown arrow issue :-)

[bogdan]

Looked like this for me when initially installed:

I had to do the following modifications to make it work:
(the styling of js-choices is done to prevent input to jump around the interface between dom:ready and choices being applied to input)

--- tmp/choices.css     2024-09-26 11:03:44
+++ app/assets/stylesheets/choices.css  2024-09-26 11:07:54
@@ -1,4 +1,10 @@
- .choices {
+.js-choices {
+  @apply max-h-12;
+}
+.js-choices option {
+  @apply hidden;
+}
+.choices {
     @apply relative overflow-hidden;
 }

@@ -38,7 +44,9 @@
     @apply w-2 ml-0 p-2 bg-center;

     background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
-    background-size: 8px;
+    background-size: contain;
+    height: fit-content;
+    background-position: center;
 }

 .choices[data-type*=select-one] .choices__button:focus,.choices[data-type*=select-one] .choices__button:hover {
@@ -74,7 +82,9 @@
     @apply relative inline-block w-2;

     background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
-    background-size: 8px;
+    background-size: contain;
+    height: fit-content;
+    background-position: center;
 }

 .choices[data-type*=select-multiple] .choices__button:focus,.choices[data-type*=select-multiple] .choices__button:hover,.choices[data-type*=text] .choices__button:focus,.choices[data-type*=text] .choices__button:hover {
@@ -90,7 +100,7 @@
 }

 .choices:has(select) .choices__input {
-    @apply inline-block text-sm border-0 px-3 ring-0 border-base-300 py-2 !ring-transparent;
+    @apply inline-block text-sm border-0 px-3 ring-0 border-base-300 py-2 !ring-transparent bg-inherit;
 }

 .choices:has(select[multiple]) .choices__input {
@@ -126,7 +136,7 @@
 }

 .choices__list--multiple .choices__item {
-    @apply badge badge-primary rounded-lg mr-1 break-all box-border inline-flex inline-table;
+    @apply badge badge-secondary rounded-lg mr-1 break-all box-border inline-flex inline-table;
 }

 .choices__list--multiple .choices__item[data-deletable] {

[NikarashiHatsu]

Thank you for your contribution on this discussion, I'll look forward into your implementation and recheck whether it is suitable for revised styling or not.