Zum Inhalt springen
1.6k

Beschriftung

Eine Beschriftung für Eingabefelder, Kontrollkästchen, Schalter und Optionsfeldgruppen – durch Klicken wird das Steuerelement aktiviert, gesetzt in der neobrutalistischen Überschriftenschrift.

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

Das Label beschriftet ein Formular-Steuerelement – verknüpfe es mit der id des Steuerelements, und Klicks auf den Text fokussieren oder schalten das Feld. Diese Variante ist ein gestyltes natives <label>-Element ohne Primitive-Abhängigkeit, gesetzt in der neobrutalistischen Überschriften-Schrift.

Typische Anwendungsfälle:

  • Alleinstehende Steuerelemente – eine einzelne Checkbox, ein Switch oder eine Radio-Gruppe, die kein volles Field rechtfertigt: Einwilligungs-Checkboxen, Benachrichtigungs-Umschalter.
  • Einstellungszeilen – Switch-plus-Label-Paare, bei denen die gesamte Beschriftung als Klickfläche dient.
  • Eigene Formularlayouts – Raster und Inline-Anordnungen, in die die gestapelte Struktur von Field nicht passt.

Installation

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

Installiere die folgenden Abhängigkeiten:

pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

Kopiere den folgenden Code und füge ihn in dein Projekt ein.

components/ui/label.tsx
"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 }

Passe die Importpfade an dein Projekt-Setup an.

Verwendung

import { Label } from "@/components/ui/label"
<Label htmlFor="email">Your email address</Label>

Label in einem Field

Verwende für Formularfelder die Komponente Field, die die Komponenten FieldLabel, FieldDescription und FieldError bereits integriert enthält.

<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

Um RTL-Unterstützung in Neobrutalism zu aktivieren, sieh dir die RTL-Konfigurationsanleitung an.

"use client"

import * as React from "react"

Barrierefreiheit

Label rendert ein natives <label>-Element: Stimme htmlFor auf die id des Steuerelements ab (oder verschachtle das Steuerelement im Label), dann kündigen Screenreader den Text als zugänglichen Namen des Steuerelements an, während Klicks auf das Label es fokussieren oder umschalten. Die Styles enthalten select-none, ein Doppelklick auf das Label wählt dessen Text also nicht aus. <label> funktioniert nur mit Formular-Steuerelementen – lass für eigene Widgets stattdessen aria-labelledby auf die id des Labels zeigen.

API-Referenz

Weitere Informationen findest du in der Dokumentation von Base UI Label.