Edit Profile

Dark Mode

Copy config

Copy and paste the following code into your global.css file to apply the styles.

WARNING: This component is in
Draft
status. This means that it is still in development and may have bugs or missing features. It is not intended to be used in production. You may use it for testing purposes.

Checkbox

A control that allows the user to toggle between checked and not checked.


Installation

Run the following cli command or copy/paste the component code into your project

qwik-ui add checkbox
import { $, type PropsOf, component$ } from '@builder.io/qwik';
import { cn } from '@qwik-ui/utils';
 
export const Checkbox = component$<PropsOf<'input'>>(
  ({ id, name, ['bind:checked']: checkedSig, checked, onInput$, ...props }) => {
    const inputId = id || name;
    return (
      <input
        type="checkbox"
        {...props}
        // workaround to support two way data-binding on the Input component (https://github.com/QwikDev/qwik/issues/3926)
        checked={checkedSig ? checkedSig.value : checked}
        onInput$={checkedSig ? $((_, el) => (checkedSig.value = el.checked)) : onInput$}
        data-checked={checked || checkedSig?.value || ''}
        class={cn(
          'peer h-4 w-4 shrink-0 border-primary text-primary accent-primary ring-offset-background focus:ring-ring focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
          props.class,
        )}
        id={inputId}
      />
    );
  },
);

Examples

With Text

Decide whether you want to appear available or not in search results.

import { component$ } from '@builder.io/qwik';
import { Checkbox } from '~/components/ui';
import { Label } from '~/components/ui';

export default component$(() => {
  return (
    <div>
      <div class="flex items-center space-x-2">
        <Checkbox id="terms" />
        <div>
          <Label for="terms">Accept terms and conditions</Label>
        </div>
      </div>
      <p class="ml-6 text-sm text-muted-foreground">
        Decide whether you want to appear available or not in search results.
      </p>
    </div>
  );
});

Disabled

import { component$ } from '@builder.io/qwik';
import { Checkbox } from '~/components/ui';

export default component$(() => {
  return (
    <div class="flex items-center space-x-2">
      <Checkbox id="terms2" disabled />
      <label
        for="terms2"
        class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
      >
        Accept terms and conditions
      </label>
    </div>
  );
});

Data binding

checked: false

import { component$, useSignal } from '@builder.io/qwik';
import { Checkbox, Label } from '~/components/ui';

export default component$(() => {
  const checkedSig = useSignal(false);
  return (
    <div>
      <div class="flex items-center space-x-2">
        <Checkbox id="terms" bind:checked={checkedSig} />
        <div>
          <Label for="terms">Accept terms and conditions</Label>
        </div>
      </div>
      <p class="text-sm text-muted-foreground">checked: {checkedSig.value.toString()}</p>
    </div>
  );
});