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>.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
required | boolean | false | |
className | string | — |
Teclado
- Click
- Enfoca el campo asociado.
Accesibilidad
htmlFortiene que apuntar aliddel campo. Sin eso, el click no enfoca y el lector no relaciona nada.requiredagrega la marca visual; el campo además necesita su propiorequiredoaria-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.