sebs7n-ui

Formularios

import { Fieldset, FieldsetLegend } from "sebs7n-ui/fieldset"

Ejemplos

Un grupo de campos

`Fieldset` le da un nombre común a varios campos. No es un título decorativo: es lo que hace que dos campos "Calle" en la misma pantalla se distingan para quien usa un lector de pantalla.

import { Field, FieldDescription, FieldLabel } from "sebs7n-ui/field"
import { Fieldset, FieldsetLegend } from "sebs7n-ui/fieldset"
import { Form } from "sebs7n-ui/form"
import { Input } from "sebs7n-ui/input"
import { Textarea } from "sebs7n-ui/textarea"

function Grupo() {
  return (
    <Form className="w-full max-w-sm">
      <Fieldset>
        <FieldsetLegend>Domicilio fiscal</FieldsetLegend>
        <Field name="domicilio.calle">
          <FieldLabel>Calle y número</FieldLabel>
          <Input />
        </Field>
        <Field name="domicilio.localidad">
          <FieldLabel>Localidad</FieldLabel>
          <Input />
        </Field>
      </Fieldset>

      <Field name="notas">
        <FieldLabel>Notas para el repartidor</FieldLabel>
        <Textarea rows={3} />
        <FieldDescription>Opcional.</FieldDescription>
      </Field>
    </Form>
  )
}

El error que es del grupo y no de un campo

"Tildá al menos un archivo" no pertenece a ninguna casilla suelta. `Fieldset` no tiene dónde mostrarlo —un `<fieldset>` no lleva un mensaje que el lector anuncie—, así que ese conjunto se declara como lo que es: un campo con `name`, valor y error. El `FieldError` queda atado al `role="group"` por `aria-describedby` y se limpia solo al tildar.

import { Button } from "sebs7n-ui/button"
import { CheckboxGroup, CheckboxGroupItem } from "sebs7n-ui/checkbox-group"
import { Field, FieldError, FieldLabel } from "sebs7n-ui/field"
import { Fieldset, FieldsetLegend } from "sebs7n-ui/fieldset"
import { Form } from "sebs7n-ui/form"
import { Input } from "sebs7n-ui/input"

function ErrorDelGrupo() {
  return (
    <Form className="w-full max-w-sm">
      <Fieldset>
        <FieldsetLegend>Documentación del legajo</FieldsetLegend>

        <Field name="titular">
          <FieldLabel>Titular</FieldLabel>
          <Input placeholder="Apellido y nombre" />
        </Field>

        <Field
          name="adjuntos"
          validate={(valor) => ((valor as string[]).length > 0 ? null : "Tildá al menos un archivo")}
        >
          <FieldLabel required>Archivos que adjuntás</FieldLabel>
          <CheckboxGroup>
            <CheckboxGroupItem value="factura">Factura</CheckboxGroupItem>
            <CheckboxGroupItem value="remito">Remito</CheckboxGroupItem>
            <CheckboxGroupItem value="comprobante">Comprobante de pago</CheckboxGroupItem>
          </CheckboxGroup>
          <FieldError />
        </Field>
      </Fieldset>

      <Button type="submit">Guardar el legajo</Button>
    </Form>
  )
}

Props

Generadas del TypeScript del paquete. Las propias del componente, más las heredadas del primitivo que tienen algo que explicar —marcadas «heredada de Base UI»—. El resto está en la línea «hereda de».

Fieldset

Hereda las props de Fieldset.Root.

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—	Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana.

FieldsetLegend

Hereda las props de Fieldset.Legend.

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—	Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana.

Teclado

Tab: Recorre los campos del grupo en orden. El título no recibe foco.

Accesibilidad

El grupo tiene nombre accesible: es lo que distingue dos campos "Calle" en la misma pantalla, uno en "Domicilio fiscal" y otro en "Dirección de entrega".
El título va con aria-labelledby en vez de un <legend> nativo, que no se puede ubicar libremente sin pelear con el navegador.
disabled en el grupo apaga todos los campos de adentro sin que haya que repetirlo campo por campo.

Reglas de uso

Para opciones excluyentes va RadioGroup, que ya trae su propia semántica de grupo.
Un formulario de tres campos no necesita un Fieldset: agrupar de a uno agrega ruido, no estructura.
El error del grupo no va en el `Fieldset`. No tiene parte de error a propósito: un <fieldset> no lleva un mensaje que el lector de pantalla anuncie —lo que anuncia al entrar es la leyenda—, así que sería un cartel rojo que media pantalla nunca escucha.
Cuando el error es de un conjunto de opciones ("tildá al menos un archivo"), ese conjunto es un campo: un Field con name alrededor de un CheckboxGroup, y el FieldError adentro. Ahí sí queda atado al role="group" por aria-describedby, entra en el errors de Form por su name y se limpia solo al tildar. El Fieldset sigue siendo el que agrupa, si hace falta.
Un error que cruza campos que siguen siendo distintos ("el domicilio no existe", sobre calle + localidad) va en el campo que se puede corregir, o arriba del formulario en un Alert.

Relacionados

Field CheckboxGroup Form