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 { PropsOf, component$ } from '@builder.io/qwik';
import { cn } from '@qwik-ui/utils';
 
export const Checkbox = component$<PropsOf<'input'>>(({ name, ...props }) => {
  return (
    <input
      type="checkbox"
      {...props}
      class={cn(
        'border-primary accent-primary text-primary ring-offset-background focus:ring-ring focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer peer h-4 w-4 shrink-0 disabled:cursor-not-allowed disabled:opacity-50',
        props.class,
      )}
      name={name}
      id={name}
    />
  );
});

Examples

With Text

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

import { component$ } from '@builder.io/qwik';
import { Checkbox, Label } from '@qwik-ui/styled';

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 '@qwik-ui/styled';

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>
  );
});