Warren UI

Label

10px mono uppercase form label.

Source
"use client"

import { Input } from "@/registry/warren/input/input"
import { Label } from "@/registry/warren/label/label"

export default function LabelDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <div className="flex w-64 flex-col gap-1">
        <Label htmlFor="mission-id">MISSION ID</Label>
        <Input id="mission-id" placeholder="E.G. 0427-DELTA" />
      </div>
    </div>
  )
}

Installation

npx shadcn@latest add https://warren.eduard3v.com/r/label.json

Usage

import { Label } from "@/components/ui/label"
<Label htmlFor="mission-id">MISSION ID</Label>

Association

Pass htmlFor to associate the label with a control by its id — clicking the label focuses the control. All native <label> props are forwarded.

<Label htmlFor="mission-id">MISSION ID</Label>
<Input id="mission-id" placeholder="E.G. 0427-DELTA" />

API Reference

This component has no custom props. It forwards native <label> attributes; TypeScript types are derived from React.ComponentProps<"label">. All native attributes are supported (htmlFor, ...).

On this page