Label

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

The label captions a form control — pair it with the control's id, and clicks on the text focus or toggle the field. This variant is a styled native <label> element with no primitive dependency, set in the neobrutalist heading font.

Reach for it when:

• Standalone controls — a lone checkbox, switch, or radio group that doesn't warrant a full Field: consent boxes, notification toggles.
• Settings rows — switch-plus-label pairs where the whole caption is a click target.
• Custom form layouts — grids and inline arrangements where Field's stacked structure doesn't fit.

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/label.json
npx shadcn@latest add https://neobrutalism.com/r/base/label.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/label.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/label.json
Copy

"use client"

import * as React from "react"
import { Label as LabelPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Label({
  className,
  ...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
  return (
    <LabelPrimitive.Root
      data-slot="label"
      className={cn(
        "flex items-center gap-2 text-sm leading-none font-head font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
        className
      )}
      {...props}
    />
  )
}

export { Label }

Usage#

Copyimport { Label } from "@/components/ui/label"

Copy<Label htmlFor="email">Your email address</Label>

Label in Field#

For form fields, use the Field component which includes built-in FieldLabel, FieldDescription, and FieldError components.

Copy<Field>
  <FieldLabel htmlFor="email">Your email address</FieldLabel>
  <Input id="email" />
</Field>

import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {

RTL#

To enable RTL support in Neobrutalism.com, see the RTL configuration guide.

"use client"

import * as React from "react"

Accessibility#

Label renders a native <label> element: match htmlFor to the control's id (or nest the control inside the label) and screen readers announce the text as the control's accessible name, while clicks on the label focus or toggle it. The styles include select-none, so double-clicking the label doesn't select its text. <label> only associates with form controls — for custom widgets, point aria-labelledby at the label's id instead.

API Reference#

Label accepts all native <label> attributes. See the MDN <label> documentation for the full list.