Label

Renders an accessible label associated with controls.

Accept terms and conditions

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

export default component$(() => {
  return (
    <div>
      <div class="flex items-center space-x-2">
        <Checkbox id="terms" />
        <Label for="terms">Accept terms and conditions</Label>
      </div>
    </div>
  );
});

Installation

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

qwik-ui add label

import { component$, Slot, type PropsOf } from '@builder.io/qwik';
import { Label as HeadlessLabel } from '@qwik-ui/headless';
import { cn } from '@qwik-ui/utils';

type LabelProps = PropsOf<'label'>;

export const Label = component$<LabelProps>((props) => {
  return (
    <HeadlessLabel
      {...props}
      class={cn(
        'font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
        props.class,
      )}
    >
      <Slot />
    </HeadlessLabel>
  );
});

Usage

import { Label } from '~/components/ui';

<Label for="email">Your email address</Label>