Saltar al contenido
1.6k

Etiqueta

Un texto de ayuda para los campos de entrada, las casillas de selección, los botones de selección y los grupos de botones de opción: al hacer clic se activa el control; el texto está escrito con la fuente neobrutalista del título.

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

La etiqueta titula un control de formulario: asóciala al id del control y los clics sobre el texto enfocan o conmutan el campo. Esta variante es un elemento <label> nativo estilizado, sin dependencia de ninguna primitiva, compuesto en la fuente de titulares neobrutalista.

Recurre a este componente cuando:

  • Controles sueltos — una casilla, un switch o un grupo de radios aislados que no justifican un Field completo: casillas de consentimiento, conmutadores de notificaciones.
  • Filas de ajustes — pares de switch y etiqueta donde todo el texto es zona de clic.
  • Diseños de formulario a medida — cuadrículas y disposiciones en línea donde la estructura apilada de Field no encaja.

Instalación

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

Instala las siguientes dependencias:

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

Copia y pega el siguiente código en tu proyecto.

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 }

Actualiza las rutas de importación según la configuración de tu proyecto.

Uso

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

Label en un Field

Para los campos de formulario, usa el componente Field, que incluye los componentes FieldLabel, FieldDescription y 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 activar el soporte RTL en Neobrutalism, consulta la guía de configuración de RTL.

"use client"

import * as React from "react"

Accesibilidad

Label renderiza un elemento <label> nativo: haz coincidir htmlFor con el id del control (o anida el control dentro de la etiqueta) y los lectores de pantalla anunciarán el texto como el nombre accesible del control, mientras que los clics sobre la etiqueta lo enfocan o lo conmutan. Los estilos incluyen select-none, así que el doble clic sobre la etiqueta no selecciona su texto. <label> solo se asocia con controles de formulario: para los widgets a medida, apunta aria-labelledby al id de la etiqueta.

Referencia de API

Consulta la documentación Base UI Label para obtener más información.