Todos los componentes (204)

Dirección

Campos · AddressField

Qué es y cuándo usarlo

La dirección postal de España en un bloque: calle y número, piso, código postal y población. La provincia no se pregunta: sale de las dos primeras cifras del código postal y se escribe debajo («Madrid»), así que no puede llegar un 28001 en Sevilla.

Cuándo usarlo

Envío y facturación en la compra, la ficha de un cliente, la dirección de una tienda.
value y onChange llevan la dirección entera (EMPTY_ADDRESS para empezar en blanco).
section="billing" para la de facturación: el navegador distingue las dos y no rellena una con la otra.
addressErrors(value) dice qué falta antes de seguir; errors pinta los del servidor, que mandan sobre los de aquí.

Cuándo no

Una dirección de fuera de España: el código postal se comprueba contra las provincias españolas y uno de fuera sale como error. Para otro país, campos sueltos con TextField.

Teclado: Tab recorre los cuatro campos. Cada uno se comprueba al salir de él, no en cada tecla. El código postal se queda en cinco cifras aunque se pegue otra cosa.

Accesibilidad: es un fieldset con su leyenda (el label, «Dirección de envío» por defecto), y cada campo tiene la suya. Calle, código postal y población son obligatorios (aria-required); el piso lleva «Opcional» de ayuda. Un código que no es de España lo dice con esas palabras. Los autocomplete son los de la especificación con su sección (shipping address-line1, shipping postal-code…): con ellos el autorrelleno resuelve medio formulario.

Aspecto fino: sin variables propias: los campos usan --amset-field-* y el bloque se ajusta con las clases amset-address__title, amset-address__row y amset-address__cp.

Cómo se ve

Dirección de envío

Calle y número

Piso, puerta o escalera

Opcional

Código postal

Madrid

Población

<AddressField
  label="Direccion de envio"
  section="shipping"
  value={direccion}
  onChange={setDireccion}
/>

Props

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

Prop	Tipo	Para qué sirve
`onChange`obligatoria	`(address: PostalAddress) => void`	—
`value`obligatoria	`PostalAddress`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`disabled`	`boolean`	—
`errors`	`AddressErrors`	Errores de fuera (los del servidor). Mandan sobre los de aqui.
`label`	`string`	Titulo del bloque. Es la leyenda del grupo de campos.
`section`	`"shipping" \| "billing"`	Prefijo de los `autocomplete`: `shipping` o `billing`. Con el, el navegador distingue la direccion de envio de la de facturacion y no rellena una con la otra.
`size`	`"sm" \| "md" \| "lg"`	—
`variant`	`FieldVariant`	—

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

En el banco de pruebas

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