All components (204)
Address
Fields · AddressField
What it is and when to use it
A Spanish postal address in one block: street and number, apartment, postal code and city. The province is not asked for: it comes from the first two digits of the postal code and is written below it ("Madrid"), so a 28001 in Seville cannot get through.
When to use it
- Shipping and billing at checkout, a customer record, a store address.
valueandonChangecarry the whole address (EMPTY_ADDRESSto start blank).section="billing"for the billing one: the browser tells the two apart and does not fill one with the other.addressErrors(value)says what is missing before moving on;errorsshows the server's, which take precedence over the local ones.
When not to
- An address outside Spain: the postal code is checked against the Spanish provinces and one from abroad shows up as an error. For another country, use separate fields with
TextField.
Keyboard: Tab goes through the four fields. Each one is checked when you leave it, not on every keystroke. The postal code stays at five digits even if something else is pasted.
Accessibility: it is a fieldset with its legend (the label, "Shipping address" by default), and each field has its own. Street, postal code and city are required (aria-required); the apartment field carries "Optional" as its hint. A code that is not from Spain says so in those words. The autocomplete values are the ones from the specification with their section (shipping address-line1, shipping postal-code…): with them, autofill resolves half the form.
Fine-tuning: no variables of its own: the fields use --amset-field-* and the block is adjusted with the classes amset-address__title, amset-address__row and amset-address__cp.
What it looks like
<AddressField
label="Shipping address"
section="shipping"
value={direccion}
onChange={setDireccion}
/>Props
Import it with import { AddressField } from '@amset/ui'. Required props are marked.
| Prop | Type | What it does |
|---|---|---|
onChangerequired | (address: PostalAddress) => void | — |
valuerequired | PostalAddress | — |
className | string | Merged with the library classes; it does not replace them. |
disabled | boolean | — |
errors | AddressErrors | External errors (the server's). They take precedence over the ones computed here. |
label | string | Title of the block. It is the legend of the group of fields. |
section | "shipping" | "billing" | Prefix of the `autocomplete` values: `shipping` or `billing`. With it, the browser tells the shipping address from the billing one and does not fill one with the other. |
size | "sm" | "md" | "lg" | — |
variant | FieldVariant | — |
It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.
In the test bench
Every state and variant, to try one at a time, on its page at ui.amset.tech: