Ir al contenido
FormulariosServer Component

Label

La etiqueta de un campo, con la marca de obligatorio incluida.

import { Label } from "sebs7n-ui/label"

Ejemplos

Opcional y obligatorio

import { Input } from "sebs7n-ui/input"
import { Label } from "sebs7n-ui/label"
import { useId } from "react"

function Basico() {
  const cuit = useId()
  const alias = useId()
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <div className="flex flex-col gap-2">
        <Label htmlFor={cuit} required>
          CUIT
        </Label>
        <Input id={cuit} placeholder="30-71234567-9" required />
      </div>
      <div className="flex flex-col gap-2">
        <Label htmlFor={alias}>Alias</Label>
        <Input id={alias} placeholder="acme.pagos" />
      </div>
    </div>
  )
}

Props

Generadas del TypeScript del paquete. Solo las props propias: las heredadas del primitivo de Base UI o del elemento HTML están en la línea «hereda de».

Label

Hereda las props de <label>.

PropTipoPor defectoDescripción
requiredbooleanfalse
classNamestring

Teclado

Click
Enfoca el campo asociado.

Accesibilidad

  • htmlFor tiene que apuntar al id del campo. Sin eso, el click no enfoca y el lector no relaciona nada.
  • required agrega la marca visual; el campo además necesita su propio required o aria-required.

Reglas de uso

  • Arriba del campo, no al costado: en un celular al costado no entra.
  • El texto de ayuda va debajo del campo, no dentro del label.

Relacionados