Pular para o conteúdo
1.6k

Rótulo

Uma legenda para campos de entrada, caixas de seleção, botões de alternância e grupos de botões de opção — os cliques ativam o controle, escrita na fonte neobrutalista do título.

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

O label dá legenda a um controle de formulário — associe-o ao id do controle e cliques no texto passam a focar ou alternar o campo. Esta variante é um elemento <label> nativo estilizado, sem dependência de primitivo, composto na fonte de título neobrutalista.

Quando usar:

  • Controles avulsos — um checkbox, switch ou grupo de radio isolado que não justifica um Field completo: caixas de consentimento, alternâncias de notificação.
  • Linhas de configurações — pares de switch e rótulo em que a legenda inteira é área de clique.
  • Layouts de formulário personalizados — grades e arranjos em linha em que a estrutura empilhada do Field não se encaixa.

Instalação

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

Instale as seguintes dependências:

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

Copie e cole o código a seguir no seu projeto.

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 }

Atualize os caminhos de importação conforme a configuração do seu projeto.

Uso

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

Label em um Field

Para campos de formulário, use o componente Field, que inclui os componentes FieldLabel, FieldDescription e FieldError integrados.

<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

Para ativar o suporte a RTL no Neobrutalism, consulte o guia de configuração de RTL.

"use client"

import * as React from "react"

Acessibilidade

Label renderiza um elemento <label> nativo: faça o htmlFor corresponder ao id do controle (ou aninhe o controle dentro do label) e os leitores de tela anunciam o texto como o nome acessível do controle, enquanto cliques no rótulo o focam ou alternam. Os estilos incluem select-none, então o clique duplo no rótulo não seleciona o texto. <label> só se associa a controles de formulário — para widgets personalizados, aponte aria-labelledby para o id do rótulo.

Referência da API

Consulte a documentação Base UI Label para obter mais informações.