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
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.


Renders an accessible label associated with controls.

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 (
      <Label for="firstName">First name</Label>
      <input type="text" id="firstName" placeholder="John Doe" />

🎨 Anatomy


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;