Label | Cortexcn

Accept terms and conditions

Installation

pnpm dlx shadcn@latest add @cortexcn/label

pnpm dlx shadcn@latest add @cortexcn/label

Usage

import { Label } from "@/components/label";

Examples

With checkbox

Accept terms and conditions

import { Checkbox } from "@/components/checkbox"
import { Field } from "@/components/field"
import { Label } from "@/components/label"

export function LabelWithCheckbox() {
  return (
    <div className="flex flex-col gap-6">
      <Field orientation="horizontal">
        <Checkbox id="label-demo-terms" />
        <Label htmlFor="label-demo-terms">Accept terms and conditions</Label>
      </Field>
    </div>
  )
}

import { Checkbox } from "@/components/checkbox"import { Field } from "@/components/field"import { Label } from "@/components/label"export function LabelWithCheckbox() {  return (    <div className="flex flex-col gap-6">      <Field orientation="horizontal">        <Checkbox id="label-demo-terms" />        <Label htmlFor="label-demo-terms">Accept terms and conditions</Label>      </Field>    </div>  )}

With input

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

export function LabelWithInput() {
  return (
    <div className="flex flex-col gap-6">
      <Field>
        <Label htmlFor="label-demo-username">Username</Label>
        <Input id="label-demo-username" placeholder="Username" />
      </Field>
    </div>
  )
}

import { Field } from "@/components/field"import { Input } from "@/components/input"import { Label } from "@/components/label"export function LabelWithInput() {  return (    <div className="flex flex-col gap-6">      <Field>        <Label htmlFor="label-demo-username">Username</Label>        <Input id="label-demo-username" placeholder="Username" />      </Field>    </div>  )}

Disabled

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

export function LabelDisabled() {
  return (
    <div className="flex flex-col gap-6">
      <Field data-disabled={true}>
        <Label htmlFor="label-demo-disabled">Disabled</Label>
        <Input id="label-demo-disabled" placeholder="Disabled" disabled />
      </Field>
    </div>
  )
}

import { Field } from "@/components/field"import { Input } from "@/components/input"import { Label } from "@/components/label"export function LabelDisabled() {  return (    <div className="flex flex-col gap-6">      <Field data-disabled={true}>        <Label htmlFor="label-demo-disabled">Disabled</Label>        <Input id="label-demo-disabled" placeholder="Disabled" disabled />      </Field>    </div>  )}

With textarea

import { Field } from "@/components/field"
import { Label } from "@/components/label"
import { Textarea } from "@/components/textarea"

export function LabelWithTextarea() {
  return (
    <div className="flex flex-col gap-6">
      <Field>
        <Label htmlFor="label-demo-message">Message</Label>
        <Textarea id="label-demo-message" placeholder="Message" />
      </Field>
    </div>
  )
}

import { Field } from "@/components/field"import { Label } from "@/components/label"import { Textarea } from "@/components/textarea"export function LabelWithTextarea() {  return (    <div className="flex flex-col gap-6">      <Field>        <Label htmlFor="label-demo-message">Message</Label>        <Textarea id="label-demo-message" placeholder="Message" />      </Field>    </div>  )}

Adapted from the shadcn/ui Label (MIT).