Edit Profile

Dark Mode

Copy config

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

DISCLAIMER: This component is in
Beta
status. That means that it is ready for production, but the API might change.

Label

Renders an accessible label associated with controls.

Installation

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

qwik-ui add label
import { component$, Slot, PropsOf } from '@builder.io/qwik';
import { Label as QwikUILabel } from '@qwik-ui/headless';
import { cn } from '@qwik-ui/utils';
 
type LabelProps = PropsOf<'label'>;
 
export const Label = component$<LabelProps>((props) => {
  return (
    <QwikUILabel
      {...props}
      class={cn(
        'font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
        props.class,
      )}
    >
      <Slot />
    </QwikUILabel>
  );
});

Usage

import { Label } from '@/components/ui/label';
<Label for="email">Your email address</Label>