All components (204)

Flag

Data · Flag · .amset-flag

What it is and when to use it

The flag of a country, by its two-letter ISO code. The flags of the 244 countries and territories with an international dialing prefix (ITU E.164) are drawn, which are the ones PhoneField uses.

When to use it

Next to the name of a country: a phone prefix, a language selector, a shipping address.

When not to

To indicate a LANGUAGE. A flag is not a language: Spanish does not belong only to Spain, and English does not belong to the United Kingdom. That is what LocalePicker is for, which uses the name of the language.
On its own, without the country name written next to it, unless you pass it label.

Why they are not emoji, which would be one line of code: Windows has no flag font and Chrome does not substitute one, so the regional indicators come out as the two bare letters: on Windows, "🇪🇸 🇵🇹 🇫🇷 🇩🇪" literally looks like "ES PT FR DE". It would look fine on the author's Mac and bad on the machine next to it, which is the worst kind of bug. They are inline SVG, which also fits the fact that the package installs nothing.

Weight: the drawings do not travel with Flag. Each region (Europe, America, Africa, Asia, Oceania) is a separate file that is requested when one of its flags is drawn, so drawing ES and GB does not put all 244 in the page's JavaScript (about 16 KB gzipped). While it arrives it shows the two letters; a server that waits for suspense (Next, renderToPipeableStream) already ships the flag in the HTML. To have it on a client's first paint, call preloadFlags(['ES', 'GB']) before mounting.

Keyboard: it does not take part.

Accessibility: by default it is DECORATIVE (aria-hidden), because it sits next to the country name, which is what gets read. A flag cannot be the only thing that identifies a country — neither for someone using a screen reader nor for someone who cannot tell green from red. With label it stops being hidden and becomes an image with a name. A code without a drawing does not leave a mute gap: it shows the two letters.

Geometry: stripes with their proportions, the Nordic cross shifted toward the hoist, equilateral triangles where they are equilateral, stars with their number of points and in their place. All in the same 4:3 box. The ones with a coat of arms are in their geometric version: at 16 px a coat of arms is a smudge, so its silhouette is painted in its colors; Spain's without the coat of arms is the civil flag, which is a real flag. The colors are the official ones. Territories that have no official flag of their own (Guadeloupe, Martinique, Réunion, Bonaire, Svalbard...) carry the flag of their State.

Fine-tuning: --amset-flag-width, --amset-flag-radius and --amset-flag-edge.

What it looks like

<Flag code="ES" />
<Flag code="PT" />

Props

Import it with import { Flag } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`code`required	`string`	ISO-3166-1 alpha-2 code: `ES`, `PT`, `GB`. Case-insensitive.
`className`	`string`	Merged with the library classes; it does not replace them.
`label`	`string`	The name of the country. It is only needed if the flag goes ALONE, without the name written beside it: then it stops being decorative and needs to say what it is.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-flag-width`	`1.25rem`
`--amset-flag-radius`	`2px`
`--amset-flag-edge`	`var(--amset-border)`

How to change it

.amset-flag {
  --amset-flag-width: ...;
  --amset-flag-radius: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: