Zaidan

Command Palette

Search for a command to run...

GitHub

Label

Renders an accessible label associated with controls.

Installation

CLI

Manual

Copy and paste the following code into your project.

/** biome-ignore-all lint/a11y/noLabelWithoutControl: <component file - for/htmlFor handled by consumer> */
import type { ComponentProps } from "solid-js";
import { splitProps } from "solid-js";
import { cn } from "~/lib/utils";


type LabelProps = ComponentProps<"label">;


const Label = (props: LabelProps) => {
  const [local, others] = splitProps(props, ["class"]);


  return (
    <label
      class={cn(
        "z-label flex select-none items-center peer-disabled:cursor-not-allowed group-data-[disabled=true]:pointer-events-none",
        local.class,
      )}
      data-slot="label"
      {...others}
    />
  );
};


export { Label };

Examples

Here are the source code of all the examples from the preview page:

With Checkbox

import { Checkbox } from "~/components/ui/checkbox";
import { Field } from "~/components/ui/field";
import { Label } from "~/components/ui/label";
function LabelWithCheckbox() {
  return (
    <Example title="With Checkbox">
      <Field orientation="horizontal">
        <Checkbox id="label-demo-terms" />
        <Label for="label-demo-terms">Accept terms and conditions</Label>
      </Field>
    </Example>
  );
}

With Input

import { Field } from "~/components/ui/field";
import { Input } from "~/components/ui/input";
import { Label } from "~/components/ui/label";
function LabelWithInput() {
  return (
    <Example title="With Input">
      <Field>
        <Label for="label-demo-username">Username</Label>
        <Input id="label-demo-username" placeholder="Username" />
      </Field>
    </Example>
  );
}

Disabled

import { Field } from "~/components/ui/field";
import { Input } from "~/components/ui/input";
import { Label } from "~/components/ui/label";
function LabelDisabled() {
  return (
    <Example title="Disabled">
      <Field data-disabled={true}>
        <Label for="label-demo-disabled">Disabled</Label>
        <Input id="label-demo-disabled" placeholder="Disabled" disabled />
      </Field>
    </Example>
  );
}

With Textarea

import { Field } from "~/components/ui/field";
import { Label } from "~/components/ui/label";
import { Textarea } from "~/components/ui/textarea";
function LabelWithTextarea() {
  return (
    <Example title="With Textarea">
      <Field>
        <Label for="label-demo-message">Message</Label>
        <Textarea id="label-demo-message" placeholder="Message" />
      </Field>
    </Example>
  );
}
PreviewDocs