Label

Renders an accessible label associated with controls.

First name

import { component$, useStyles$ } from '@builder.io/qwik';
import { Label } from '@qwik-ui/headless';
import styles from '../snippets/label.css?inline';

export default component$(() => {
  useStyles$(styles);

  return (
    <div class="label-container">
      <Label class="label" for="firstName">
        First name
      </Label>
      <input class="input" type="text" id="firstName" placeholder="John Doe" />
    </div>
  );
});

This component is based on the native label element, it will automatically apply the correct labelling when wrapping controls or using the for attribute.

For your own custom controls to work correctly, ensure they use native elements such as button or input as a base.

✨ Features

Text selection is prevented when double clicking label.
Supports nested controls.

Building blocks

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

export default component$(() => {
  return (
    <div>
      <Label for="firstName">First name</Label>
      <input type="text" id="firstName" placeholder="John Doe" />
    </div>
  );
});

🎨 Anatomy

Component	Description
`Label`	The root container for the label

Why use a headless label?

The Qwik UI headless label component keeps focus on the input when double clicking.

The native behavior will try to select and focus the text of the label. This is often times not the desired behavior.

Example CSS

/* reset */
input {
  all: unset;
}

.label-container {
  font-size: 15px;
  font-weight: 500;
  line-height: 35px;
  color: hsl(var(--foreground));
  display: flex;
  flex-direction: column;
}

.input {
  width: 200px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 0 10px;
  height: 35px;
  font-size: 15px;
  line-height: 1;
  background-color: hsl(var(--background));
  border: 2px dotted hsl(var(--foreground));
  border-radius: 0;
}

input:focus {
  outline: 2px solid hsl(var(--foreground));
}

input::selection {
  background-color: var(--black-a9);
  color: white;
}