Label

A text label for form controls

A simple label component that pairs well with form controls like Input and Textarea.

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

export default function Example() {
  return (
    <div className="space-y-2">
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" placeholder="you@example.com" />
    </div>
  );
}

View Code

Installation

bash

liminal add label

Usage

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

export default function Example() {
  return (
    <div className="space-y-2">
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" placeholder="you@example.com" />
    </div>
  );
}

View Code

Examples

With Input

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

export default function Example() {
  return (
    <div className="space-y-2">
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" placeholder="you@example.com" />
    </div>
  );
}

View Code

With Checkbox

Accept terms and conditions

import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";

export default function Example() {
  return (
    <div className="flex items-center space-x-2">
      <Checkbox id="terms" />
      <Label htmlFor="terms">Accept terms and conditions</Label>
    </div>
  );
}

View Code

API

Prop	Type	Default	Description
htmlFor	string	-	ID of the form control this label describes. Use for accessibility.