Перейти к содержимому
1.6k

Метка

Подпись для полей ввода, флажков, переключателей и групп радио-кнопок — при нажатии элемент управления активируется; текст набран шрифтом в стиле необрутализма.

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

Label подписывает form-control — свяжите его с id контрола, и клики по тексту фокусируют или переключают поле. Этот вариант — стилизованный нативный <label> без зависимости от примитива, набранный необруталистским heading-шрифтом.

Когда это пригодится:

  • Отдельные контролы — одиночный checkbox, switch или radio group, которым не нужен полный Field: согласия, тогглы уведомлений.
  • Строки настроек — пары switch+label, где вся подпись — click target.
  • Кастомные layout форм — сетки и inline-раскладки, куда stacked-структура 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) — программы чтения с экрана объявят текст как accessible name, а клики по label сфокусируют или переключат контрол. В стилях есть select-none, поэтому двойной клик по label не выделяет текст. <label> связывается только с form-controls — для кастомных виджетов указывайте aria-labelledby на id label.

Справочник API

Подробнее — в документации Base UI Label.