@pnx-mixtape/mxds 0.0.29 → 0.1.0-rc.0

package/src/Form/Checkbox/FormCheckbox.figma.ts

@@ -0,0 +1,28 @@
+// url=https://www.figma.com/design/aGH90DVE6lrFVdLfDCHnFK/mxds---Design-System?node-id=89-359
+// source=src/Form/Checkbox/FormCheckbox.tsx
+// component=FormCheckbox
+import figma from "figma"
+
+const instance = figma.selectedInstance
+
+const legendHandle = instance.findText("Legend")
+const legend = legendHandle.type === "TEXT" ? legendHandle.textContent : ""
+
+const items = instance.findConnectedInstances(node => node.codeConnectId() === "checkbox")
+const item1 = items[0]?.executeTemplate().example
+const item2 = items[1]?.executeTemplate().example
+
+// Always renders <FormItem fieldset legend={label}> internally — not shown as a
+// separate FormItem wrapper here since that would double up the fieldset styling;
+// FormCheckbox IS the fieldset.
+export default {
+  example: figma.code`<FormCheckbox label="${legend}">
+  ${item1}
+  ${item2}
+</FormCheckbox>`,
+  imports: ['import { FormCheckbox } from "@pnx-mixtape/mxds/react"'],
+  id: "form-checkbox",
+  metadata: {
+    nestable: true,
+  },
+}

package/src/Form/Checkbox/FormCheckbox.tsx

@@ -20,16 +20,15 @@ const CheckboxContext = createContext<CheckboxGroupState>(null)
 
 type FormCheckboxProps = CheckboxGroupProps &
   PropsWithChildren & {
-    label: string
+    label?: string
   }
 
 const FormCheckbox = ({ label, children, ...props }: FormCheckboxProps): JSX.Element => {
   const state = useCheckboxGroupState(props)
-  const { groupProps, labelProps } = useCheckboxGroup(props, state)
+  const { groupProps } = useCheckboxGroup(props, state)
 
   return (
-    <FormItem fieldset {...groupProps}>
-      <legend {...labelProps}>{label}</legend>
+    <FormItem fieldset {...groupProps} legend={label}>
       <CheckboxContext value={state}>{children}</CheckboxContext>
     </FormItem>
   )
@@ -52,8 +51,7 @@ const Checkbox = ({
   const state = use(CheckboxContext)
   const { inputProps } = useCheckboxGroupItem(props, state, ref)
 
-  const classes = classNames("mx-checkbox", {
-    className,
+  const classes = classNames("mx-checkbox", className, {
     error: status === FormStatus.INVALID,
     success: status === FormStatus.VALID,
   })
@@ -83,8 +81,7 @@ const SingleCheckbox = ({
   const state = useToggleState(props)
   const { inputProps } = useCheckbox(props, state, ref)
 
-  const classes = classNames("mx-checkbox", {
-    className,
+  const classes = classNames("mx-checkbox", className, {
     error: status === FormStatus.INVALID,
     success: status === FormStatus.VALID,
   })

package/src/Form/Checkbox/README.md

@@ -0,0 +1,183 @@
+# Checkbox & Radio
+
+Accessible checkbox and radio group components powered by [react-aria](https://react-spectrum.adobe.com/react-aria/) and [react-stately](https://react-spectrum.adobe.com/react-stately/). These are the only form components in the design system that use external accessibility libraries — they handle keyboard navigation, focus management, and ARIA group roles automatically.
+
+> **HTML/Twig users:** use native `<input type="checkbox">` / `<input type="radio">` with `.mx-checkbox` / `.mx-radio` wrapper classes. The react-aria wiring is React-only.
+
+## CSS Import
+
+```css
+@import "@pnx-mixtape/mxds/src/Form/form.css";
+```
+
+---
+
+## Twig
+
+```twig
+{# Single checkbox #}
+{% include '@mixtape/Form/Checkbox/input-checkbox.twig' with {
+  id: 'subscribe',
+  name: 'subscribe',
+  value: '1',
+  label: 'Subscribe to newsletter',
+  checked: true,
+} %}
+
+{# Required checkbox with invalid status — adds the "error" class
+   and aria-invalid, plus aria-describedby pointing at status-{id} #}
+{% include '@mixtape/Form/Checkbox/input-checkbox.twig' with {
+  id: 'terms',
+  name: 'terms',
+  value: 'agreed',
+  label: 'I agree to the terms',
+  required: true,
+  status: 'invalid',
+  hasDescription: true,
+} %}
+```
+
+**input-checkbox.twig props** (composed from `FormControl` in `ids-shape` — checkbox/radio share the same template):
+
+| Prop             | Type              | Required | Description                                                                                                         |
+| ---------------- | ----------------- | -------- | ------------------------------------------------------------------------------------------------------------------- |
+| `id`             | `string`          | Yes      | Input id — also used to derive the `aria-describedby` ids (`help-{id}`, `status-{id}`)                              |
+| `name`           | `string`          | Yes      | `name` attribute on the input                                                                                       |
+| `value`          | `string`          | Yes      | `value` attribute on the input                                                                                      |
+| `label`          | `string`          | Yes      | Label text rendered inside `<label for="{id}">`                                                                     |
+| `checked`        | `boolean`         | No       | Adds `checked="checked"` to the input                                                                               |
+| `required`       | `boolean`         | No       | Adds the `required` attribute                                                                                       |
+| `status`         | `FormStatusTypes` | No       | `invalid` adds the `error` class and `aria-invalid="true"`; `valid` adds the `success` class. Defaults to `default` |
+| `hasDescription` | `boolean`         | No       | When `true`, `aria-describedby` is wired up to `help-{id}` (and `status-{id}` when `status` is set)                 |
+| `attributes`     | `Attribute`       | No       | Optional Drupal-style attributes object — `mx-checkbox` (and the status class) is always merged on top              |
+
+The template renders `type="checkbox"` directly — for radio inputs use a sibling template (or hand-author the markup with `mx-radio` on the wrapper and `type="radio"` on the input).
+
+---
+
+## HTML
+
+```html
+<!-- Checkbox group -->
+<fieldset class="mx-form-item mx-fieldset mx-fieldset--plain">
+  <legend class="mx-legend">Interests</legend>
+  <div class="mx-checkbox">
+    <input type="checkbox" id="music" name="interests" value="music" />
+    <label for="music">Music</label>
+  </div>
+  <div class="mx-checkbox">
+    <input type="checkbox" id="film" name="interests" value="film" />
+    <label for="film">Film</label>
+  </div>
+</fieldset>
+
+<!-- Radio group -->
+<fieldset class="mx-form-item mx-fieldset mx-fieldset--plain">
+  <legend class="mx-legend">Preferred contact</legend>
+  <div class="mx-radio">
+    <input type="radio" id="email" name="contact" value="email" />
+    <label for="email">Email</label>
+  </div>
+  <div class="mx-radio">
+    <input type="radio" id="phone" name="contact" value="phone" />
+    <label for="phone">Phone</label>
+  </div>
+</fieldset>
+
+<!-- Inline checkboxes -->
+<fieldset class="mx-fieldset mx-fieldset--plain mx-fieldset--inline">
+  <legend>Options</legend>
+  <div class="mx-checkbox mx-form-item--inline">
+    <input type="checkbox" id="opt1" />
+    <label for="opt1">Option 1</label>
+  </div>
+</fieldset>
+```
+
+---
+
+## React
+
+### Checkbox group
+
+Use `FormCheckbox` as the group wrapper and `Checkbox` for each option. For a single standalone checkbox, use `SingleCheckbox`.
+
+```tsx
+import { FormCheckbox, Checkbox, SingleCheckbox } from "@pnx-mixtape/mxds/react"
+import { FormStatus } from "../../enums"
+
+// Group of checkboxes
+<FormCheckbox label="Interests" value={["music"]} onChange={setSelected}>
+  <Checkbox value="music">Music</Checkbox>
+  <Checkbox value="film">Film</Checkbox>
+  <Checkbox value="sport">Sport</Checkbox>
+</FormCheckbox>
+
+// With validation status
+<FormCheckbox label="Interests" isRequired>
+  <Checkbox value="music" status={FormStatus.INVALID}>Music</Checkbox>
+</FormCheckbox>
+
+// Single standalone checkbox (not part of a group)
+<SingleCheckbox onChange={setChecked}>I agree to the terms</SingleCheckbox>
+```
+
+**`FormCheckbox` props:** all `CheckboxGroupProps` from react-stately + `label: string`
+
+**`Checkbox` props:** all `AriaCheckboxGroupItemProps` + `status?: FormStatus`, `className?: string`
+
+**`SingleCheckbox` props:** all `AriaCheckboxProps` + `status?: FormStatus`, `className?: string`
+
+---
+
+### Radio group
+
+```tsx
+import FormRadio, { Radio } from "@pnx-mixtape/mxds/src/Form/Radio/FormRadio"
+import { FormStatus } from "../../enums"
+
+<FormRadio label="Preferred contact" defaultValue="email">
+  <Radio value="email">Email</Radio>
+  <Radio value="phone">Phone</Radio>
+  <Radio value="post">Post</Radio>
+</FormRadio>
+
+// With status
+<FormRadio label="Preferred contact" isRequired>
+  <Radio value="email" status={FormStatus.INVALID}>Email</Radio>
+</FormRadio>
+```
+
+**`FormRadio` props:** all `AriaRadioGroupProps` from react-aria + `label: string`
+
+**`Radio` props:** all `AriaRadioProps` + `status?: FormStatus`, `className?: string`
+
+---
+
+## How they work
+
+Both components use a React Context to share group state between the parent (`FormCheckbox`/`FormRadio`) and individual items (`Checkbox`/`Radio`). The group renders as a `<fieldset>` via `FormItem fieldset`, with `<legend>` for the group label.
+
+Each input auto-generates its own `id` via `useId()` and wires its `<label htmlFor>` accordingly — you don't need to manage ids manually.
+
+---
+
+## Status states
+
+| `status`             | Class on wrapper | Effect                    |
+| -------------------- | ---------------- | ------------------------- |
+| `FormStatus.DEFAULT` | —                | Normal border             |
+| `FormStatus.INVALID` | `error`          | Red border on the input   |
+| `FormStatus.VALID`   | `success`        | Green border on the input |
+
+## Touch target sizes
+
+On `pointer: coarse` devices (touchscreens), `--control-size` automatically increases to `2rem` for easier tapping. Override via:
+
+```css
+.mx-checkbox,
+.mx-radio {
+  --control-size: 2.5rem;
+  --control-gap: var(--spacing-s);
+}
+```

package/src/Form/Checkbox/__snapshots__/FormCheckbox.stories.tsx.snap

@@ -1,5 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Checkbox Group 1`] = `"<fieldset class="mx-form-item" role="group" id="react-aria-_r_1_"><legend>Checkbox group</legend><div class="mx-checkbox"><input id="_r_6_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="1"><label for="_r_6_">Option #1</label></div><div class="mx-checkbox"><input id="_r_7_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="2"><label for="_r_7_">Option #2</label></div><div class="mx-checkbox"><input id="_r_8_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="3"><label for="_r_8_">Option #3</label></div></fieldset>"`;
+exports[`Checkbox Group 1`] = `"<fieldset class="mx-form-item mx-fieldset" role="group" id="react-aria-_r_3_"><legend class="mx-legend">Checkbox group</legend><div class="mx-checkbox"><input id="_r_8_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="1"><label for="_r_8_">Option #1</label></div><div class="mx-checkbox"><input id="_r_b_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="2"><label for="_r_b_">Option #2</label></div><div class="mx-checkbox"><input id="_r_e_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="3"><label for="_r_e_">Option #3</label></div></fieldset>"`;
 
 exports[`Single 1`] = `"<div class="mx-checkbox"><input id="_r_0_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="option"><label for="_r_0_">Check me out</label></div>"`;

package/src/Form/Description/FormDescription.figma.ts

@@ -0,0 +1,28 @@
+// url=https://www.figma.com/design/aGH90DVE6lrFVdLfDCHnFK/mxds---Design-System?node-id=35-74
+// source=src/Form/Description/FormDescription.tsx
+// component=FormDescription
+import figma from "figma"
+
+const instance = figma.selectedInstance
+
+const text = instance.getString("Text")
+const status = instance.getEnum("Status", {
+  Default: "FormStatus.DEFAULT",
+  Invalid: "FormStatus.INVALID",
+  Valid: "FormStatus.VALID",
+})
+
+const statusProp = status === "FormStatus.DEFAULT" ? "" : ` status={${status}}`
+
+// Real gap surfaced building this in Figma: only the small leading icon is colour-coded
+// per status — the message text itself stays --colour-foreground in all three states,
+// not tinted red/green. The icon is a plain coloured-circle placeholder here, not the
+// real masked SVG glyph (form-error.svg/form-success.svg).
+export default {
+  example: figma.code`<FormDescription id="field"${statusProp}>${text}</FormDescription>`,
+  imports: ['import { FormDescription, FormStatus } from "@pnx-mixtape/mxds/react"'],
+  id: "form-description",
+  metadata: {
+    nestable: true,
+  },
+}

package/src/Form/Description/FormDescription.tsx

@@ -7,22 +7,41 @@ type FormDescriptionProps = PropsWithChildren & {
   status?: FormStatus
 }
 
+/**
+ * Compute the id for a form description / status block.
+ *
+ * Default descriptions: `help-{id}` (matches `form-description.twig`).
+ * Status messages:      `status-{id}` (matches `form-status.twig`).
+ *
+ * Wire both onto an input via `aria-describedby="help-{id} status-{id}"` when
+ * both are present.
+ */
+export const helpId = (id: string): string => `help-${id}`
+export const statusId = (id: string): string => `status-${id}`
+
 const FormDescription = ({
   children,
   id,
   status = FormStatus.DEFAULT,
-}: FormDescriptionProps): JSX.Element => (
-  <div
-    id={`${id}-help`}
-    role="tooltip"
-    className={classNames({
-      "mx-description": status === FormStatus.DEFAULT,
-      "mx-error-message": status === FormStatus.INVALID,
-      "mx-success-message": status === FormStatus.VALID,
-    })}
-  >
-    {children}
-  </div>
-)
+}: FormDescriptionProps): JSX.Element => {
+  const isStatus = status !== FormStatus.DEFAULT
+  // Persistent help text needs no role. Status messages announce politely
+  // (success) or assertively (error) — `tooltip` is wrong for persistent content.
+  const role =
+    status === FormStatus.INVALID ? "alert" : status === FormStatus.VALID ? "status" : undefined
+  return (
+    <div
+      id={isStatus ? statusId(id) : helpId(id)}
+      role={role}
+      className={classNames({
+        "mx-description": status === FormStatus.DEFAULT,
+        "mx-error-message": status === FormStatus.INVALID,
+        "mx-success-message": status === FormStatus.VALID,
+      })}
+    >
+      {children}
+    </div>
+  )
+}
 
 export default FormDescription

package/src/Form/Description/__snapshots__/Description.stories.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Description 1`] = `
-"<div class="mx-description" id="help-description" role="tooltip">
+"<div class="mx-description" id="help-description">
   Help text that provides additional information about the field.
 </div>
 "

package/src/Form/Description/__snapshots__/FormDescription.stories.tsx.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Description 1`] = `"<div id="mix-label-help" role="tooltip" class="mx-description">Some help text</div>"`;
+exports[`Description 1`] = `"<div id="help-mix-label" class="mx-description">Some help text</div>"`;

package/src/Form/Description/__snapshots__/FormStatus.stories.ts.snap

@@ -1,14 +1,14 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Message 1`] = `
-"<div class="mx-error-message" id="status-message" role="tooltip">
+"<div class="mx-error-message" id="status-message" role="alert">
   Help text that provides additional information about the field.
 </div>
 "
 `;
 
 exports[`Success 1`] = `
-"<div class="mx-success-message" id="status-message" role="tooltip">
+"<div class="mx-success-message" id="status-message" role="status">
   Help text that provides additional information about the field.
 </div>
 "

package/src/Form/Description/form-description.twig

@@ -1,4 +1,4 @@
 {% set attributes = (attributes ?? create_attribute()).addClass("mx-description") %}
-<div{{ attributes}} id="help-{{ id }}" role="tooltip">
+<div{{ attributes}} id="help-{{ id }}">
   {{ description }}
 </div>

package/src/Form/Description/form-status.twig

@@ -4,7 +4,7 @@
 ] %}
 {% if type != "default" %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
-<div{{ attributes}} id="status-{{ id }}" role="tooltip">
+<div{{ attributes}} id="status-{{ id }}" role="{{ type == 'invalid' ? 'alert' : 'status' }}">
   {{ message }}
 </div>
 {% endif %}

package/src/Form/Form/form.twig

@@ -1,14 +1,10 @@
 {% set classes = ['mx-form', 'mx-vertical-flow'] %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 <form{{ attributes }} action="{{ action }}">
-  {% for item in items %}
-    {{ item }}
-  {% endfor %}
+  {{ items }}
   {% if actions is not empty %}
   <div class="mx-form-actions">
-    {% for action in actions %}
-      {{ action }}
-    {% endfor %}
+    {{ actions }}
   </div>
   {% endif %}
 </form>

package/src/Form/FormItem/FormItem.figma.ts

@@ -0,0 +1,30 @@
+// url=https://www.figma.com/design/aGH90DVE6lrFVdLfDCHnFK/mxds---Design-System?node-id=35-93
+// source=src/Form/FormItem/FormItem.tsx
+// component=FormItem
+import figma from "figma"
+
+const instance = figma.selectedInstance
+
+const fieldset = instance.getEnum("Fieldset", { Off: false, On: true })
+
+const fieldsetProp = fieldset ? " fieldset" : ""
+const legendProp = fieldset ? ' legend="Legend text"' : ""
+
+// "Label" and "Input" are real SLOTs (not fixed content) — designers can freely swap
+// the label/input instances or add extra content (e.g. a FormDescription) into
+// either one. Real code has no such grouping (FormItem just renders flat children),
+// but the two slots still resolve to plain children here, concatenated in order.
+const label = instance.getSlot("Label")
+const input = instance.getSlot("Input")
+
+export default {
+  example: figma.code`<FormItem${fieldsetProp}${legendProp}>
+  ${label}
+  ${input}
+</FormItem>`,
+  imports: ['import { FormItem } from "@pnx-mixtape/mxds/react"'],
+  id: "form-item",
+  metadata: {
+    nestable: true,
+  },
+}

package/src/Form/FormItem/FormItem.tsx

@@ -16,8 +16,13 @@ const FormItem = ({
 }: FormItemProps): JSX.Element => {
   const Wrapper = fieldset ? "fieldset" : "div"
   return (
-    <Wrapper className={classNames("mx-form-item", className)} {...props}>
-      {legend && <legend>{legend}</legend>}
+    <Wrapper
+      className={classNames("mx-form-item", className, {
+        "mx-fieldset": fieldset,
+      })}
+      {...props}
+    >
+      {legend && <legend className="mx-legend">{legend}</legend>}
       {children}
     </Wrapper>
   )

package/src/Form/FormItem/README.md

@@ -0,0 +1,122 @@
+# FormItem
+
+The key composition wrapper for every form field. Handles the structural layout — `<div>` for single fields, `<fieldset>` for groups — and provides the `mx-form-item` spacing and max-width constraint.
+
+## Twig
+
+```twig
+{# Single field wrapper (default) #}
+{% include '@mixtape/Form/FormItem/form-item.twig' with {
+  id: 'name',
+  label: label_component,
+  fields: input_component,
+  descriptionStart: description_component,
+  status: status_component,
+} %}
+
+{# Fieldset wrapper for a group of related fields #}
+{% include '@mixtape/Form/FormItem/form-item.twig' with {
+  id: 'contact-method',
+  as: 'fieldset',
+  label: legend_component,
+  fields: [
+    radio_email_component,
+    radio_phone_component,
+    radio_post_component,
+  ],
+} %}
+
+{# Inline label + input #}
+{% include '@mixtape/Form/FormItem/form-item.twig' with {
+  id: 'subscribe',
+  inline: true,
+  label: label_component,
+  fields: checkbox_component,
+} %}
+```
+
+**form-item.twig props** (`FormItem` type from `ids-shape`):
+
+| Prop               | Type                       | Required | Description                                                                         |
+| ------------------ | -------------------------- | -------- | ----------------------------------------------------------------------------------- |
+| `id`               | `string`                   | Yes      | Used by callers to wire `for`/`htmlFor` on the rendered label and input             |
+| `label`            | `FormLabel`                | No       | Rendered label markup placed before the field(s)                                    |
+| `fields`           | `FormInput \| FormInput[]` | No       | One or many rendered field strings. Arrays are looped; a scalar is printed directly |
+| `descriptionStart` | `FormDescription`          | No       | Rendered description markup placed between the label and the field(s)               |
+| `descriptionEnd`   | `FormDescription`          | No       | Rendered description markup placed after the field(s)                               |
+| `status`           | `FormStatus`               | No       | Rendered status / error message markup placed last                                  |
+| `as`               | `'div' \| 'fieldset'`      | No       | Wrapper element. Defaults to `div`. `fieldset` adds the `mx-fieldset` class         |
+| `inline`           | `boolean`                  | No       | Adds `mx-form-item--inline` for side-by-side label and input                        |
+| `attributes`       | `Attribute`                | No       | Optional Drupal-style attributes object — `mx-form-item` is always merged on top    |
+
+The template inspects `fields[0]` to decide whether to loop or print directly — pass an array when you have multiple inputs (e.g. radio/checkbox group), or a single rendered string for the standard one-input form item.
+
+## HTML
+
+```html
+<!-- Single field -->
+<div class="mx-form-item">
+  <label class="mx-label" for="name">Full name</label>
+  <input class="mx-input__text mx-input--wide" id="name" name="name" type="text" />
+</div>
+
+<!-- Group (fieldset) -->
+<fieldset class="mx-form-item mx-fieldset mx-fieldset--plain">
+  <legend class="mx-legend">Preferred contact</legend>
+  <!-- radio inputs -->
+</fieldset>
+
+<!-- Inline label + input -->
+<div class="mx-form-item mx-form-item--inline">
+  <label class="mx-label mx-label--inline" for="subscribe">Subscribe to newsletter</label>
+  <input type="checkbox" id="subscribe" />
+</div>
+```
+
+## React
+
+```tsx
+import { FormItem } from "@pnx-mixtape/mxds/react"
+
+// Single field wrapper (default)
+<FormItem>
+  <FormLabel id="email" text="Email" />
+  <FormText id="email" name="email" />
+</FormItem>
+
+// Fieldset for a group of related fields (checkbox/radio)
+<FormItem fieldset legend="Preferred contact method">
+  {/* radio or checkbox inputs */}
+</FormItem>
+
+// Custom class
+<FormItem className="my-field">
+  ...
+</FormItem>
+```
+
+**Props:**
+
+| Prop        | Type      | Default | Description                                        |
+| ----------- | --------- | ------- | -------------------------------------------------- |
+| `fieldset`  | `boolean` | `false` | Renders as `<fieldset>` instead of `<div>`         |
+| `legend`    | `string`  | —       | `<legend>` text — only used when `fieldset={true}` |
+| `className` | `string`  | —       | Extra class on the wrapper                         |
+
+## CSS modifiers
+
+| Class                  | Effect                                                     |
+| ---------------------- | ---------------------------------------------------------- |
+| `mx-form-item--inline` | `display: flex` — label and input side by side             |
+| `mx-fieldset--plain`   | Removes border and padding — use for checkbox/radio groups |
+| `mx-fieldset--inline`  | Checkbox/radio options displayed in a horizontal row       |
+
+## Notes
+
+- `mx-form-item` applies `max-inline-size: var(--container-max-width)` — inputs never stretch wider than the text column
+- Required field indicators are applied via CSS `::after` on `.mx-label` when the input has `[required]` — no JS needed
+- Always use `<fieldset>` + `<legend>` for checkbox and radio groups — `FormItem fieldset` handles this in React, use `mx-fieldset mx-fieldset--plain` in HTML
+
+---
+
+→ Used in context: `mockups/ContactPage.stories.ts:12`