Naar inhoud
1.6k

Label

Een bijschrift voor invoervelden, selectievakjes, schakelaars en keuzeknopgroepen — klikken activeert het besturingselement, weergegeven in het neobrutalistische lettertype van de koptekst.

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

Het label voorziet een formulierbesturingselement van een opschrift — koppel het aan het id van het element, en klikken op de tekst geeft het veld focus of schakelt het om. Deze variant is een gestyled native <label>-element zonder primitive-dependency, gezet in het neobrutalistische koplettertype.

Ideaal voor:

  • Losstaande besturingselementen — een losse checkbox, switch of radiogroep die geen volledig Field rechtvaardigt: toestemmingsvakjes, meldingstoggles.
  • Instellingenrijen — switch-plus-labelparen waarbij het hele opschrift een klikdoel is.
  • Eigen formulierlay-outs — grids en inline-opstellingen waar de gestapelde structuur van Field niet in past.

Installatie

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

Installeer de volgende afhankelijkheden:

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

Kopieer en plak de volgende code in je project.

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 }

Werk de importpaden bij zodat ze overeenkomen met je projectconfiguratie.

Gebruik

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

Label in een Field

Gebruik voor formuliervelden de component Field, die de componenten FieldLabel, FieldDescription en FieldError al ingebouwd bevat.

<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

Om RTL-ondersteuning in Neobrutalism in te schakelen, zie de RTL-configuratiegids.

"use client"

import * as React from "react"

Toegankelijkheid

Label rendert een native <label>-element: laat htmlFor overeenkomen met het id van het besturingselement (of nestel het element in het label) en schermlezers lezen de tekst voor als de toegankelijke naam van het element, terwijl klikken op het label het focus geeft of omschakelt. De styling bevat select-none, dus dubbelklikken op het label selecteert de tekst niet. <label> koppelt alleen aan formulierbesturingselementen — laat voor eigen widgets in plaats daarvan aria-labelledby naar het id van het label wijzen.

API-referentie

Zie de documentatie van Base UI Label voor meer informatie.