Feature Request: Checkbox and Checkbox Group

[Svish]

Was happy to see the library includes the Radio Group, but for this library to be properly useful, it should really also include the other basics of form components, like the checkbox and checkbox group. 👍

[JosephBenTzur]

I second that! Checkbox components are just as essential

[Nautman]

I wholeheartedly agree!

[oschade]

That's missing. Good idea. Do you know any workaround at this moment?

[ankurgupta-srit]

Was happy to see the library includes the Radio Group, but for this library to be properly useful, it should really also include the other basics of form components, like the checkbox and checkbox group. 👍

it is a must have component in lib

[bryanltobing]

up for this. haven't seen this component yet. any workaround?

[makemile]

tengo un problema con la casillas propagacion de eventos.

[RobyCigar]

Hi, @Svish I just make workaround with the radiogroup and turns it into checkbox

Note: this is not a good solustion, please use with caution and read what @Svish said below.

<script setup>
import { ref } from 'vue'
import {
    RadioGroup,
    RadioGroupLabel,
    RadioGroupDescription,
    RadioGroupOption,
} from '@headlessui/vue'

const plans = [
    {
        name: 'Startup',
        ram: '12GB',
        cpus: '6 CPUs',
        disk: '160 GB SSD disk',
    },
    {
        name: 'Business',
        ram: '16GB',
        cpus: '8 CPUs',
        disk: '512 GB SSD disk',
    },
    {
        name: 'Enterprise',
        ram: '32GB',
        cpus: '12 CPUs',
        disk: '1024 GB SSD disk',
    },
]

const selected = ref([])

const createSelectedOption = (option) => {
    // toggle if exist
    if (isSelected(option)) {
        selected.value = selected.value.filter((it) => it.name !== option.name)
        return
    }
    // add to selected
    selected.value.push(option)
}

const isSelected = (option) => {
    // check if option is selected
    return selected.value.find((it) => it.name === option.name)
}
</script>
<template>
    <div class="w-full px-4 py-16">
        <div class="mx-auto w-full max-w-md">
            <RadioGroup>
                <RadioGroupLabel class="sr-only">Server size</RadioGroupLabel>
                <div class="space-y-2">
                    <RadioGroupOption @click="createSelectedOption(plan)" as="template" v-for="plan in plans" :key="plan.name" :value="plan"
                        v-slot="{ active, checked }">
                        <div :class="[
                            active
                                ? 'ring-2 ring-white ring-opacity-60 ring-offset-2 ring-offset-sky-300'
                                : '',
                            isSelected(plan) ? 'bg-sky-900 bg-opacity-75 text-white ' : 'bg-white ',
                        ]" class="relative flex cursor-pointer rounded-lg px-5 py-4 shadow-md focus:outline-none">
                            <div class="flex w-full items-center justify-between">
                                <div class="flex items-center">
                                    <div class="text-sm">
                                        <RadioGroupLabel as="p" :class="isSelected(plan) ? 'text-white' : 'text-gray-900'"
                                            class="font-medium">
                                            {{ plan.name }}
                                        </RadioGroupLabel>
                                        <RadioGroupDescription as="span" :class="isSelected(plan) ? 'text-sky-100' : 'text-gray-500'"
                                            class="inline">
                                            <span> {{ plan.ram }}/{{ plan.cpus }}</span>
                                            <span aria-hidden="true"> &middot; </span>
                                            <span>{{ plan.disk }}</span>
                                        </RadioGroupDescription>
                                    </div>
                                </div>
                                <div v-show="isSelected(plan)" class="shrink-0 text-white">
                                    <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none">
                                        <circle cx="12" cy="12" r="12" fill="#fff" fill-opacity="0.2" />
                                        <path d="M7 13l3 3 7-7" stroke="#fff" stroke-width="1.5" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </RadioGroupOption>
                </div>
            </RadioGroup>
        </div>
    </div>
</template>

[Svish]

@RobyCigar I'm Sorry, but that seems like a bad solution. It might look OK graphically, but radio-buttons and checkboxes have different semantics and accessibility properties attached to them. Using radio-buttons for something that should be checkboxes is similar to using tables for layout, css for emphasis, divs for lists, and so on. It will not be valid according to WCAG requirements, which should be followed.

[smahm006]

Bad solution maybe, but still a solution! Thanks @RobyCigar

[RobyCigar]

@RobyCigar I'm Sorry, but that seems like a bad solution. It might look OK graphically, but radio-buttons and checkboxes have different semantics and accessibility properties attached to them. Using radio-buttons for something that should be checkboxes is similar to using tables for layout, css for emphasis, divs for lists, and so on. It will not be valid according to WCAG requirements, which should be followed.

i know lol 😂, i agree with u, for now i think its okay for someone in rush for deadline like me 👍🏻. i hope someone in the future make a PR about this. again, this is just temprorary solution.

[samjarmakani]

Could we get any sort of update on this? Very strange that this isn't a thing.

[xAt0mZ]

Until we have a proper component, as Switch uses a checkbox, you can use it and style it as you need.

For example, using heroicons' CheckIcon

import { useState } from 'react';
import { Switch } from '@headlessui/react';
import { CheckIcon } from '@heroicons/react/24/outline';

export function Checkbox({ label }: { label: string }) {
  const [enabled, setEnabled] = useState(false);

  return (
    <Switch.Group>
      <div className="flex items-center gap-1">
        <Switch
          checked={enabled}
          onChange={setEnabled}
          className="inline-flex h-5 w-5 rounded border border-theme-8 bg-theme-7 text-theme-2"
        >
          <CheckIcon className={enabled ? 'opacity-100' : 'opacity-0'} />
        </Switch>
        <Switch.Label>{label}</Switch.Label>
      </div>
    </Switch.Group>
  );
}

Renders as

[calebporzio]

Looks like it's done! https://tailwindcss.com/blog/headless-ui-v2#new-checkbox-component