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.

Label

Renders an accessible label associated with controls.

First name

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

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

  return (
    <div
      class="label-container"
      style={{
        display: 'flex',
        padding: '0 20px',
        flexWrap: 'wrap',
        gap: 15,
        alignItems: 'center',
      }}
    >
      <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));
}

input {
  width: 200px;
  display: inline-flex;
  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));
  box-shadow: 0 0 0 1px hsl(var(--foreground));
}

input:focus {
  box-shadow: 0 0 0 2px hsl(var(--foreground));
}

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