<intl-list>
<intl-list> formats a list with Intl.ListFormat. Child text is split on whitespace. The helper function can also accept arrays.
Native reference: Intl.ListFormat
html
1<intl-list>shipping tax discounts</intl-list>Attributes and properties
| Attribute | JS property | Type | Description |
|---|---|---|---|
value | value | string/string[] | List source. Child text is used when omitted. |
locale | locale | string | Overrides the runtime locale. |
type | type | conjunction | disjunction | unit | and | or | none | List relationship. |
type-style | typeStyle | long | short | narrow | List style. |
Aliases: and means conjunction, or means disjunction, and none means unit.
value
Use child text for simple whitespace-separated lists.
html
1<intl-list>shipping tax discounts</intl-list>Use the property from JavaScript when the list is dynamic or contains items with spaces.
html
1<intl-list id="delivery-options">email phone chat</intl-list>2 3<script>4 document.getElementById('delivery-options').value = [5 'priority mail',6 'store pickup',7 'courier delivery',8 ]9</script>locale
Use locale for a one-off override.
html
1<intl-list locale="en-US">apples pears peaches</intl-list>2<intl-list locale="es-ES">apples pears peaches</intl-list>type
type controls the relationship between list items.
html
1<intl-list type="conjunction">apples pears peaches</intl-list>2<intl-list type="disjunction">email phone chat</intl-list>3<intl-list type="unit">meter second kilogram</intl-list>The aliases are shorter to write in markup.
html
1<intl-list type="and">apples pears peaches</intl-list>2<intl-list type="or">email phone chat</intl-list>3<intl-list type="none">meter second kilogram</intl-list>type-style
type-style controls output length.
html
1<intl-list type="and" type-style="long">A B C</intl-list>2<intl-list type="and" type-style="short">A B C</intl-list>3<intl-list type="and" type-style="narrow">A B C</intl-list>For short or narrow styles, the component adds a long-form aria-label when the accessible label differs from the visible output.