Label

With a field

Prop for (or htmlFor) pairs the label with the input's id.

E-mail

tsx

import { component$ } from "@builder.io/qwik";
import { Input } from "~/components/ui/base/input";
import { Label } from "~/components/ui/base/label";

export default component$(() => (
  <div class="flex flex-col gap-2">
    <Label for="demo-email">E-mail</Label>
    <Input id="demo-email" type="email" placeholder="you@example.com" />
  </div>
));

Peer + disabled

The peer class belongs on the input; peer-disabled:* on the label only reacts when the input comes before the label in the DOM — you can fix the layout with a grid (rows 2 / 1).

Locked field

tsx

import { Input } from "~/components/ui/base/input";
import { Label } from "~/components/ui/base/label";

// In the DOM, .peer must come before Label (because of Tailwind peer-*).
<div class="grid grid-cols-1 gap-2">
  <Input
    id="demo-locked"
    disabled
    value="Cannot edit"
    class="peer col-start-1 row-start-2"
  />
  <Label for="demo-locked" class="col-start-1 row-start-1">
    Locked field
  </Label>
</div>

Metadata

Source: meta.generated.json (see npm run generate)

File base/label/meta.generated.json not found or path not allowed.