Select materials in a stable order and choose required or alternative wording. The main output is a readable instruction, with formatToParts details available below it.
Start with a real selection task
Build a workshop supply note with four choices: Paper, Markers, Tape, and Scissors. Start with the first three selected. Keep the choice order stable so the sentence does not rearrange supplies after every click.
In required-materials mode, the note reads "Bring Paper, Markers, and Tape." With only Paper selected, it reads "Bring Paper." With Paper and Tape, it reads "Bring Paper and Tape." With no selection, display "Choose at least one supply" rather than assembling an empty sentence around a missing list.
In alternatives mode, use "Choose one: Paper, Markers, or Tape." Changing the connector also changes the instruction. Merely substituting or inside "Bring" would leave the requirement ambiguous.
These are supplied exercise labels. Replace them with the actual workshop materials before using the note. If an activity requires scissors as well as paper, do not put them in an alternatives list just because the preview looks shorter.
Pass strings and explicit options
Create new Intl.ListFormat('en-US', { style: 'long', type: 'conjunction' }) and call format with the selected strings. Use disjunction for the alternatives mode. The long style suits a plain instruction where the words and and or should be easy to read.
Keep the list data separate from the sentence prefix. The same selected values can then feed a plain note and a parts inspector without guessing where commas belong. There is no need for a special branch that manually joins two items and another that handles three.
The locale influences list formatting. It does not translate Paper into another language. If the audience changes, provide suitable translated labels and surrounding sentences along with the chosen locale. Changing a language tag alone cannot do that writing work.
Inspect parts when you need to style the supplies
The formatToParts() method returns element pieces for supplied items and literal pieces for separators and connectors. For a teaching view, show those pieces in order and label their types. That lets a developer see which characters came from the supplied values and which came from formatting.
If you emphasize selected supplies in the note, create elements and assign text content for each part. Preserve the literal pieces, including their spacing. Do not split the finished string on a comma: a supply label can itself contain punctuation, and a connector is not necessarily a comma.
Keep the readable instruction as the main output. The parts inspector belongs below it and can wrap across lines. A technical view should help explain a decision without making the workshop participant read an array before finding the materials.
For a real workshop, review the surrounding sentence as carefully as the generated punctuation. A conjunction describes materials needed together only because the instruction says Bring. In alternatives mode, Choose one makes the decision explicit. A formatter cannot decide the classroom requirement on the teacher’s behalf.
If the labels change, rebuild the sentence from the selected values in the same declared order. Do not sort them while formatting.
A single selected item needs no separator, while two selected items use the native two-item connector. An empty selection produces a helpful instruction rather than a fragment such as Bring followed by a period. These edge cases belong in the same review as the familiar three-item list.
Try the worked example
Format the default required materials, then choose Alternatives to change both the connector and sentence prefix. Switch back to Required and uncheck Markers for “Paper and Tape.” Uncheck all for a prompt to choose a supply. A locale formats labels; it does not translate them.
This builds local instructions from supplied labels, without saving selections, ordering supplies, or translating the words.
Recreate this example
Build one complete self-contained HTML page for this task: build a supply sentence using native US-English list formatting.
Use these exact original practice data and worked expectations: Choices: Paper, Markers, Tape, and Scissors. The first 3 are selected. Required: Bring Paper, Markers, and Tape. Alternatives: Choose one: Paper, Markers, or Tape. None: Choose at least one supply.
Implement the following useful local interactions: Use native labeled checkboxes, required/alternatives buttons, and Format. Intl.ListFormat en-US long conjunction/disjunction; formatToParts inspector labels element and literal values. Use textContent only. Zero selections have a clear message, unsupported API explicit. Preserve the supplied source text and distinguish an uncomputed state, a successful local result, and an invalid or incomplete input. Update output only from the current input snapshot. An input edit must retire stale feedback until the reader runs the relevant action again. Do not silently invent missing values or replace a failing case with a success.
Design the page as a compact source-and-result developer workbench with readable code, labeled inputs, and a separate explanation area. Put a compact task heading, actual sample data, the main result, and usable controls early enough to be useful on a narrow screen. Use readable text of at least 16px, generous paragraph spacing, strong contrast, native labels, accessible buttons, and visible keyboard focus. Stack long records at 360px and wrap code without page-level horizontal overflow.
Use type=button and explicit querySelector-based click handlers rather than relying on form submission. If Enter is useful, handle it only on the relevant input and ignore isComposing. Keep effects within this open page; no remote dependencies, network calls, persistence, fake downloads, or automated sending. This builds local instructions from supplied labels, without saving selections, ordering supplies, or translating the words. Place worked explanations beside their data and identify teacher or synthetic examples clearly. Output only the complete HTML document, with inline styles and script and LF line endings.
Review the workshop supply sentence builder in NOS
Confirm whether your next workshop needs all items or offers alternatives before sending the note. Review the Bring and Choose one instructions in NOS against the workshop's actual requirement, then revise eligible static participant instructions in visual editing mode before sending the note.