rootspring / multi.svelte

<!--For screen readers--> <select {id} class="sr-only" multiple {required} aria-required={required} bind:value> {#each choices as choice} <option value={choice.value}>{choice.label}</option> {/each} </select> <div class="not-sr-only"> <button on:click={() => { isOpen = !isOpen; }} class={disabled ? 'w-full text-left mx-auto flex bg-black bg-opacity-50 text-gray-100 border border-primary-200 focus:outline-none py-4 px-6 rounded-xl' : 'w-full text-left mx-auto flex transition duration-200 hover:bg-slate-900 bg-black bg-opacity-100 text-white focus:text-primary-400 border border-primary-200 focus:border-primary-400 focus:outline-none py-4 px-6 rounded-xl'} > {getLabel(value)} <!--Down arrow at end of button--> <svg class="w-6 h-6 ml-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" > <path fill-rule="evenodd" d="M10 12.586l-4.293-4.293-1.414 1.414L10 15.414l5.707-5.707-1.414-1.414z" /> </svg> </button> {#if isOpen} <div class="z-10 w-full bg-black bg-opacity-100 border border-primary-200 focus:border-primary-400 focus:outline-none rounded-xl" > {#each choices as choice} <button class={value.includes(choice.value) ? 'w-full mx-auto flex bg-primary-400 text-black border border-primary-400 focus:border-primary-400 focus:outline-none py-4 px-6 rounded-xl' : 'w-full mx-auto flex transition duration-200 hover:bg-slate-900 text-white focus:text-primary-400 focus:border-primary-400 focus:outline-none py-4 px-6 rounded-xl'} on:click={() => { if (value.includes(choice.value)) { value = value.filter((v) => v !== choice.value); } else { value = [...value, choice.value]; } }}>{choice.label}</button > {/each} </div> {/if} </div>