Przejdź do treści
1.6k

Etykieta

Podpis dla pól wprowadzania danych, pól wyboru, przełączników i grup przycisków opcji — kliknięcie aktywuje element sterujący; napis jest wyświetlany czcionką w stylu neobrutalistycznym.

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

Label podpisuje kontrolkę formularza — sparuj go z id kontrolki, a kliknięcia w tekst będą fokusować lub przełączać pole. Ten wariant to ostylowany natywny element <label> bez zależności od prymitywu, złożony neobrutalistycznym krojem nagłówkowym.

Sięgnij po ten komponent, gdy:

  • Samodzielne kontrolki — pojedynczy checkbox, przełącznik lub grupa radio, które nie potrzebują pełnego Field: zgody, przełączniki powiadomień.
  • Wiersze ustawień — pary przełącznik–etykieta, w których cały podpis jest celem kliknięcia.
  • Niestandardowe układy formularzy — siatki i układy w linii, do których pionowa struktura Field nie pasuje.

Instalacja

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

Zainstaluj następujące zależności:

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

Skopiuj i wklej poniższy kod do swojego projektu.

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 }

Zaktualizuj ścieżki importu, aby pasowały do konfiguracji twojego projektu.

Użycie

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

Label w Field

W przypadku pól formularza użyj komponentu Field, który zawiera wbudowane komponenty FieldLabel, FieldDescription i 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

Aby włączyć obsługę RTL w Neobrutalism, zobacz przewodnik konfiguracji RTL.

"use client"

import * as React from "react"

Dostępność

Label renderuje natywny element <label>: dopasuj htmlFor do id kontrolki (albo zagnieźdź kontrolkę wewnątrz etykiety), a czytniki ekranu ogłoszą tekst jako dostępną nazwę kontrolki, kliknięcia w etykietę zaś będą ją fokusować lub przełączać. Style zawierają select-none, więc dwuklik na etykiecie nie zaznacza jej tekstu. <label> wiąże się tylko z kontrolkami formularza — dla niestandardowych widgetów skieruj zamiast tego aria-labelledby na id etykiety.

Referencja API

Zobacz dokumentację Base UI Label, aby uzyskać więcej informacji.