Todos los componentes (244)

Grupo de campos

Campos · Fieldset · .amset-fieldset

Qué es y cuándo usarlo

Un grupo de campos con su rótulo: un <fieldset> de verdad.

Cuándo usarlo

Para agrupar controles que van juntos (una dirección, un plazo de pago, los permisos de una clave) y que un lector de pantalla diga el grupo antes de cada uno de ellos. Un <div> con un título encima no hace eso.
disabled apaga todos los campos de dentro a la vez.
columns reparte los campos en 2, 3 o 4 columnas sin escribir una rejilla; por debajo de 40 rem vuelven a una.
hint pone una línea de ayuda bajo el rótulo y hiddenLegend esconde el rótulo a la vista sin quitárselo al lector.

Cuándo no

Un solo campo: su propia etiqueta basta.
Un bloque con borde y sombra: Card.
Una opción única entre varias: RadioGroup, que ya es un grupo con su rótulo.

Teclado: no es enfocable; lo son los campos de dentro.

Accesibilidad: es un <fieldset> con su <legend>: el rol group y el nombre del grupo salen solos.

Aspecto fino: variables CSS --amset-fieldset-*: -gap (entre campos), -legend-size, -legend-weight y -legend-color.

Cómo se ve

Datos de envío

Los usamos solo para el reparto.

Nombre

Teléfono

Dirección

Código postal

<Fieldset legend="Datos de envío" hint="Los usamos solo para el reparto." columns={2}>
  <TextField label="Nombre" />
  <TextField label="Teléfono" />
  <TextField label="Dirección" />
  <TextField label="Código postal" />
</Fieldset>

Props

Se importa con import { Fieldset } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`children`obligatoria	`ReactNode`	—
`legend`obligatoria	`ReactNode`	El rotulo del grupo. Es la `<legend>`: lo que un lector de pantalla anuncia antes de cada campo de dentro.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`columns`	`3 \| 4 \| 2 \| 1`	Las columnas del grupo. `1` apila los campos (por defecto); con mas, se reparten y en pantalla estrecha vuelven a una.
`disabled`	`boolean`	Apaga todos los campos de dentro a la vez, como el `disabled` nativo del `<fieldset>`.
`hiddenLegend`	`boolean`	Esconde el rotulo a la vista sin quitarselo al lector de pantalla.
`hint`	`ReactNode`	Una linea de ayuda bajo el rotulo.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-fieldset-gap`	`var(--amset-space-4)`
`--amset-fieldset-legend-size`	`var(--amset-text-base)`
`--amset-fieldset-legend-weight`	`var(--amset-weight-semibold)`
`--amset-fieldset-legend-color`	`var(--amset-ink)`

Cómo se cambia

.amset-fieldset {
  --amset-fieldset-gap: ...;
  --amset-fieldset-legend-size: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: