Перейти до вмісту
1.6k

Мітка

Підпис для полів введення, прапорців, перемикачів та груп радіо-кнопок — кліки активують елемент управління; набрано шрифтом у стилі необруталізму, що використовується у заголовках.

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

Label підписує контроль форми — поєднайте з id контролю, і кліки по тексту фокусують або перемикають поле. Цей варіант — стилізований нативний елемент <label> без залежності від примітиву, набраний необруталістським шрифтом заголовка.

Коли це стане в пригоді:

  • Окремі контроли — самотній checkbox, switch або radio-група без повного Field: згода, перемикачі сповіщень.
  • Рядки налаштувань — пари switch+label, де весь підпис є ціллю кліку.
  • Власні макети форм — сітки та inline-розкладки, куди не пасує стекова структура Field.

Встановлення

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

Встановіть такі залежності:

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

Скопіюйте та вставте наведений нижче код у свій проєкт.

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 }

Оновіть шляхи імпорту відповідно до налаштувань вашого проєкту.

Використання

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

Label у Field

Для полів форми використовуйте компонент Field, який містить вбудовані компоненти FieldLabel, FieldDescription та 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

Щоб увімкнути підтримку RTL у Neobrutalism, перегляньте посібник з налаштування RTL.

"use client"

import * as React from "react"

Доступність

Label рендерить нативний <label>: зіставте htmlFor з id контролю (або вкладіть контроль у label) — програми зчитування з екрана оголосять текст як доступне ім’я контролю, а кліки по мітці фокусують або перемикають його. Стилі містять select-none, тож подвійний клік не виділяє текст. <label> асоціюється лише з контролями форм — для кастомних віджетів вказуйте aria-labelledby на id мітки.

Довідник API

Докладніше — у документації Base UI Label.