Things

The Label component provides accessible labels for form controls. It properly associates labels with their inputs for screen readers and improves usability. Built from scratch using React and native HTML elements. No dependencies on any UI library.

Quick Install

Install via shadcn/ui CLI

bash

npx shadcn@latest add https://things.marvlock.dev/registry/ui/label.json

Usage

tsx

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

function MyComponent() {
  return (
    <div className="space-y-2">
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" />
    </div>
  )
}

Label

Quick Install

Usage

Examples

With Checkbox

With Input

With Disabled Input