Aller au contenu
1.6k

Libellé

Légende pour les champs de saisie, les cases à cocher, les boutons à bascule et les groupes de boutons radio — les clics activent le contrôle, le texte étant affiché dans la police « néobrutaliste » utilisée pour les titres.

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

L’étiquette légende un contrôle de formulaire — associez-la à l’id du contrôle, et un clic sur le texte donne le focus au champ ou le bascule. Cette variante est un élément <label> natif stylé, sans dépendance à une primitive, composé dans la police de titre néobrutaliste.

À privilégier pour :

  • Contrôles isolés — une case à cocher, un interrupteur ou un groupe radio seul qui ne justifie pas un Field complet : cases de consentement, bascules de notifications.
  • Lignes de réglages — des paires interrupteur + étiquette où toute la légende est cliquable.
  • Mises en page de formulaire sur mesure — grilles et dispositions en ligne où la structure empilée de Field ne convient pas.

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

Installez les dépendances suivantes :

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

Copiez et collez le code suivant dans votre projet.

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 }

Adaptez les chemins d'import à la structure de votre projet.

Utilisation

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

Label dans un Field

Pour les champs de formulaire, utilisez le composant Field, qui intègre les composants FieldLabel, FieldDescription et FieldError.

<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

Pour activer le RTL dans Neobrutalism, consultez le guide de configuration RTL.

"use client"

import * as React from "react"

Accessibilité

Label rend un élément <label> natif : faites correspondre htmlFor à l’id du contrôle (ou imbriquez le contrôle dans l’étiquette) — les lecteurs d’écran annoncent alors le texte comme nom accessible du contrôle, et un clic sur l’étiquette lui donne le focus ou le bascule. Les styles incluent select-none : double-cliquer sur l’étiquette ne sélectionne donc pas son texte. <label> ne s’associe qu’à des contrôles de formulaire — pour les widgets personnalisés, faites plutôt pointer aria-labelledby vers l’id de l’étiquette.

Référence API

Consultez la documentation Base UI Label pour en savoir plus.