# Label

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

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

Sin `"use client"`: sirve en un Server Component.

## Ejemplos

### Opcional y obligatorio

```tsx
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

### Label

Hereda las props de `<label>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `required` | `boolean` | `false` | — |
| `className` | `string` | — | — |

## Teclado

| Tecla | Qué hace |
|---|---|
| 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

[input](/docs/components/input.md) · [textarea](/docs/components/textarea.md) · [checkbox](/docs/components/checkbox.md)