@arbor-education/design-system.components 3.0.2 → 3.2.0

package/.github/pull_request_template.md

@@ -21,12 +21,13 @@
 <!-- Step-by-step testing instructions. Include any browser-specific or environment-specific notes.
      Chromatic will post a Storybook link automatically — no need to include one here. -->
 
-1. 
-2. 
-3. 
+1.
+2.
+3.
 
 ## Checklist
 
+- [ ] This contribution has been discussed with the design system team in the [contribution process Slack channel](https://arbor-education.slack.com/archives/C0BJU1K3HH9)
 - [ ] This PR does **one thing** — the title does not contain "and" or "also"
 - [ ] The meaningful code diff is under 400 lines (or a justification is written in "Notes for code owners")
 - [ ] `yarn check-types` passes with no errors

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 3.2.0
+
+### Minor Changes
+
+- [#252](https://github.com/arbor-education/design-system.components/pull/252) [`9247537`](https://github.com/arbor-education/design-system.components/commit/9247537f0297ad464e0e4d059b186ba10db6d0d6) Thanks [@Alex-DN-SP](https://github.com/Alex-DN-SP)! - MIS-73878 Allow all lucide icons in DS Icon component
+
+### Patch Changes
+
+- [#251](https://github.com/arbor-education/design-system.components/pull/251) [`a084aa2`](https://github.com/arbor-education/design-system.components/commit/a084aa29dd18c4fa4ccb8300087140330d66ed49) Thanks [@rickbairstow](https://github.com/rickbairstow)! - MIS-74535 Updates PR template
+
+## 3.1.0
+
+### Minor Changes
+
+- [#248](https://github.com/arbor-education/design-system.components/pull/248) [`05a0a40`](https://github.com/arbor-education/design-system.components/commit/05a0a40b01301ddebbd99cf70a23d0267a2c6dd1) Thanks [@angusmglfraser](https://github.com/angusmglfraser)! - MIS-73787 ✨ Add checkbox, checkboxgroup, toggle and radio to the FormField union
+
 ## 3.0.2
 
 ### Patch Changes

package/CONTRIBUTING.md

@@ -110,6 +110,7 @@ Each commit should tell part of the story. A reviewer should be able to follow y
 
 Run through this checklist yourself before requesting review:
 
+- [ ] This contribution has been discussed with the design system team in the [contribution process Slack channel](https://arbor-education.slack.com/archives/C0BJU1K3HH9)
 - [ ] My branch name includes the Jira ticket number (e.g. `feature/MIS-12345-add-button-variant`)
 - [ ] My PR does **one thing**. The title does not contain "and" or "also"
 - [ ] The diff is under 400 lines of meaningful code (or I have written a justification)

package/dist/components/formField/FormField.d.ts

@@ -1,12 +1,16 @@
-import type { ComboboxProps } from '../combobox/types.js';
-import { type DatePickerProps } from '../datePicker/DatePicker.js';
-import { type DateTimePickerProps } from '../dateTimePicker/DateTimePicker.js';
-import { type ColourPickerDropdownProps } from './inputs/colourPickerDropdown/ColourPickerDropdown.js';
-import { type NumberInputProps } from './inputs/number/NumberInput.js';
-import { type SelectDropdownInputProps } from './inputs/selectDropdown/SelectDropdown.js';
-import { type TextInputProps } from './inputs/text/TextInput.js';
-import { type TimeInputProps } from './inputs/time/TimeInput.js';
-import { type TextAreaProps } from './inputs/textArea/TextArea.js';
+import { Combobox } from '../combobox/Combobox.js';
+import { DatePicker } from '../datePicker/DatePicker.js';
+import { DateTimePicker } from '../dateTimePicker/DateTimePicker.js';
+import { ColourPickerDropdown } from './inputs/colourPickerDropdown/ColourPickerDropdown.js';
+import { NumberInput } from './inputs/number/NumberInput.js';
+import { SelectDropdown } from './inputs/selectDropdown/SelectDropdown.js';
+import { TextInput } from './inputs/text/TextInput.js';
+import { TimeInput } from './inputs/time/TimeInput.js';
+import { TextArea } from './inputs/textArea/TextArea.js';
+import { CheckboxInput } from './inputs/checkbox/CheckboxInput.js';
+import { CheckboxGroup } from './inputs/checkbox/CheckboxGroup.js';
+import { RadioButtonGroup } from './inputs/radio/RadioButtonGroup.js';
+import { Toggle } from '../toggle/Toggle.js';
 export type FormFieldProps = {
     className?: string;
     label?: string;
@@ -17,31 +21,43 @@ export type FormFieldProps = {
     errorText?: string;
 } & ({
     inputType?: 'text';
-    inputProps?: TextInputProps;
+    inputProps?: TextInput.Props;
 } | {
     inputType?: 'textarea';
-    inputProps?: TextAreaProps;
+    inputProps?: TextArea.Props;
 } | {
     inputType?: 'number';
-    inputProps?: NumberInputProps;
+    inputProps?: NumberInput.Props;
 } | {
     inputType?: 'time';
-    inputProps?: TimeInputProps;
+    inputProps?: TimeInput.Props;
 } | {
     inputType?: 'colourPicker';
-    inputProps?: ColourPickerDropdownProps;
+    inputProps?: ColourPickerDropdown.Props;
 } | {
     inputType?: 'selectDropdown';
-    inputProps?: SelectDropdownInputProps;
+    inputProps?: SelectDropdown.Props;
 } | {
     inputType?: 'datePicker';
-    inputProps?: DatePickerProps;
+    inputProps?: DatePicker.Props;
 } | {
     inputType?: 'dateTimePicker';
-    inputProps?: DateTimePickerProps;
+    inputProps?: DateTimePicker.Props;
 } | {
     inputType?: 'combobox';
-    inputProps?: ComboboxProps;
+    inputProps?: Combobox.Props;
+} | {
+    inputType?: 'checkbox';
+    inputProps: CheckboxInput.Props;
+} | {
+    inputType?: 'checkboxGroup';
+    inputProps: CheckboxGroup.Props;
+} | {
+    inputType?: 'toggle';
+    inputProps: Toggle.Props;
+} | {
+    inputType?: 'radio';
+    inputProps: RadioButtonGroup.Props;
 });
 export declare const FormField: (props: FormFieldProps) => import("react").JSX.Element;
 export declare namespace FormField {

package/dist/components/formField/FormField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/formField/FormField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACpF,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,0CAA0C,CAAC;AAEpG,OAAO,EAAwB,KAAK,yBAAyB,EAAE,MAAM,uDAAuD,CAAC;AAC7H,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACpF,OAAO,EAAkB,KAAK,wBAAwB,EAAE,MAAM,2CAA2C,CAAC;AAC1G,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5E,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5E,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAG7E,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,CACA;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,cAAc,CAAA;CAAE,GACnD;IAAE,SAAS,CAAC,EAAE,UAAU,CAAC;IAAC,UAAU,CAAC,EAAE,aAAa,CAAA;CAAE,GACtD;IAAE,SAAS,CAAC,EAAE,QAAQ,CAAC;IAAC,UAAU,CAAC,EAAE,gBAAgB,CAAA;CAAE,GACvD;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,cAAc,CAAA;CAAE,GACnD;IAAE,SAAS,CAAC,EAAE,cAAc,CAAC;IAAC,UAAU,CAAC,EAAE,yBAAyB,CAAA;CAAE,GACtE;IAAE,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAAC,UAAU,CAAC,EAAE,wBAAwB,CAAA;CAAE,GACvE;IAAE,SAAS,CAAC,EAAE,YAAY,CAAC;IAAC,UAAU,CAAC,EAAE,eAAe,CAAA;CAAE,GAC1D;IAAE,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAAC,UAAU,CAAC,EAAE,mBAAmB,CAAA;CAAE,GAClE;IAAE,SAAS,CAAC,EAAE,UAAU,CAAC;IAAC,UAAU,CAAC,EAAE,aAAa,CAAA;CAAE,CACzD,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,gCA0E9C,CAAC;AAEF,yBAAiB,SAAS,CAAC;IACzB,KAAY,KAAK,GAAG,cAAc,CAAC;CACpC"}
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/formField/FormField.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAE1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,uDAAuD,CAAC;AAC7F,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAEzD,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAErD,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,CACA;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,SAAS,CAAC,KAAK,CAAA;CAAE,GACpD;IAAE,SAAS,CAAC,EAAE,UAAU,CAAC;IAAC,UAAU,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAA;CAAE,GACvD;IAAE,SAAS,CAAC,EAAE,QAAQ,CAAC;IAAC,UAAU,CAAC,EAAE,WAAW,CAAC,KAAK,CAAA;CAAE,GACxD;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,SAAS,CAAC,KAAK,CAAA;CAAE,GACpD;IAAE,SAAS,CAAC,EAAE,cAAc,CAAC;IAAC,UAAU,CAAC,EAAE,oBAAoB,CAAC,KAAK,CAAA;CAAE,GACvE;IAAE,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAAC,UAAU,CAAC,EAAE,cAAc,CAAC,KAAK,CAAA;CAAE,GACnE;IAAE,SAAS,CAAC,EAAE,YAAY,CAAC;IAAC,UAAU,CAAC,EAAE,UAAU,CAAC,KAAK,CAAA;CAAE,GAC3D;IAAE,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAAC,UAAU,CAAC,EAAE,cAAc,CAAC,KAAK,CAAA;CAAE,GACnE;IAAE,SAAS,CAAC,EAAE,UAAU,CAAC;IAAC,UAAU,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAA;CAAE,GACvD;IAAE,SAAS,CAAC,EAAE,UAAU,CAAC;IAAC,UAAU,EAAE,aAAa,CAAC,KAAK,CAAA;CAAE,GAC3D;IAAE,SAAS,CAAC,EAAE,eAAe,CAAC;IAAC,UAAU,EAAE,aAAa,CAAC,KAAK,CAAA;CAAE,GAChE;IAAE,SAAS,CAAC,EAAE,QAAQ,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC,KAAK,CAAA;CAAE,GAClD;IAAE,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,EAAE,gBAAgB,CAAC,KAAK,CAAA;CAAE,CAC9D,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,gCAsF9C,CAAC;AAEF,yBAAiB,SAAS,CAAC;IACzB,KAAY,KAAK,GAAG,cAAc,CAAC;CACpC"}

package/dist/components/formField/FormField.js

@@ -11,6 +11,10 @@ import { TextInput } from './inputs/text/TextInput.js';
 import { TimeInput } from './inputs/time/TimeInput.js';
 import { TextArea } from './inputs/textArea/TextArea.js';
 import { Label } from './label/Label.js';
+import { CheckboxInput } from './inputs/checkbox/CheckboxInput.js';
+import { CheckboxGroup } from './inputs/checkbox/CheckboxGroup.js';
+import { RadioButtonGroup } from './inputs/radio/RadioButtonGroup.js';
+import { Toggle } from '../toggle/Toggle.js';
 export const FormField = (props) => {
     const { className, label, id, inputType = 'text', helperLinkText, helperLinkUrl, errorText, inputProps, fieldDescription } = props;
     const classes = classNames('ds-form-field', className);
@@ -27,6 +31,6 @@ export const FormField = (props) => {
         'hasError': !!errorText,
         'aria-invalid': !!errorText,
     };
-    return (_jsxs("div", { className: classes, children: [label && (_jsx(Label, { htmlFor: id, children: label })), fieldDescription && (_jsx("span", { id: `${id}-description`, className: "ds-form-field__description", children: fieldDescription })), inputType === 'text' && (_jsx(TextInput, { ...sharedProps, ...inputProps })), inputType === 'textarea' && (_jsx(TextArea, { ...sharedProps, ...inputProps })), inputType === 'number' && (_jsx(NumberInput, { ...sharedProps, ...inputProps })), inputType === 'time' && (_jsx(TimeInput, { ...sharedProps, ...inputProps })), inputType === 'colourPicker' && (_jsx(ColourPickerDropdown, { ...sharedProps, ...inputProps })), inputType === 'selectDropdown' && (_jsx(SelectDropdown, { ...sharedProps, ...inputProps })), inputType === 'datePicker' && (_jsx(DatePicker, { ...sharedProps, ...inputProps })), inputType === 'dateTimePicker' && (_jsx(DateTimePicker, { ...sharedProps, ...inputProps })), inputType === 'combobox' && (_jsx(Combobox, { ...sharedProps, ...inputProps })), ((helperLinkText && helperLinkUrl) || errorText) && (_jsxs("div", { className: "ds-form-field__message", children: [errorText && (_jsxs("span", { className: "ds-form-field__message--error", id: `${id}-error`, children: [_jsx(Icon, { size: 12, name: "triangle-alert" }), errorText] })), helperLinkText && helperLinkUrl && (_jsxs("a", { href: helperLinkUrl, "aria-label": `${label} helper link`, className: "ds-form-field__message--helper", children: [helperLinkText, ' ', _jsx(Icon, { size: 12, name: "arrow-up-right" })] }))] }))] }));
+    return (_jsxs("div", { className: classes, children: [label && (_jsx(Label, { htmlFor: id, children: label })), fieldDescription && (_jsx("span", { id: `${id}-description`, className: "ds-form-field__description", children: fieldDescription })), inputType === 'text' && (_jsx(TextInput, { ...sharedProps, ...inputProps })), inputType === 'textarea' && (_jsx(TextArea, { ...sharedProps, ...inputProps })), inputType === 'number' && (_jsx(NumberInput, { ...sharedProps, ...inputProps })), inputType === 'time' && (_jsx(TimeInput, { ...sharedProps, ...inputProps })), inputType === 'colourPicker' && (_jsx(ColourPickerDropdown, { ...sharedProps, ...inputProps })), inputType === 'selectDropdown' && (_jsx(SelectDropdown, { ...sharedProps, ...inputProps })), inputType === 'datePicker' && (_jsx(DatePicker, { ...sharedProps, ...inputProps })), inputType === 'dateTimePicker' && (_jsx(DateTimePicker, { ...sharedProps, ...inputProps })), inputType === 'combobox' && (_jsx(Combobox, { ...sharedProps, ...inputProps })), inputType === 'checkbox' && (_jsx(CheckboxInput, { ...sharedProps, ...inputProps })), inputType === 'checkboxGroup' && (_jsx(CheckboxGroup, { ...sharedProps, ...inputProps })), inputType === 'toggle' && (_jsx(Toggle, { ...sharedProps, ...inputProps })), inputType === 'radio' && (_jsx(RadioButtonGroup, { ...sharedProps, ...inputProps })), ((helperLinkText && helperLinkUrl) || errorText) && (_jsxs("div", { className: "ds-form-field__message", children: [errorText && (_jsxs("span", { className: "ds-form-field__message--error", id: `${id}-error`, children: [_jsx(Icon, { size: 12, name: "triangle-alert" }), errorText] })), helperLinkText && helperLinkUrl && (_jsxs("a", { href: helperLinkUrl, "aria-label": `${label} helper link`, className: "ds-form-field__message--helper", children: [helperLinkText, ' ', _jsx(Icon, { size: 12, name: "arrow-up-right" })] }))] }))] }));
 };
 //# sourceMappingURL=FormField.js.map

package/dist/components/formField/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/formField/FormField.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/formField/FormField.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAC1E,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,oBAAoB,EAAE,MAAM,uDAAuD,CAAC;AAC7F,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AA0BrD,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IACjD,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,SAAS,GAAG,MAAM,EAAE,cAAc,EAAE,aAAa,EAAE,SAAS,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC;IACnI,MAAM,OAAO,GAAG,UAAU,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC;IACvD,MAAM,cAAc,GAAG,EAAE,CAAC;IAC1B,IAAI,gBAAgB,EAAE,CAAC;QACrB,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC;IAC3C,CAAC;IACD,IAAI,SAAS,EAAE,CAAC;QACd,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;IACrC,CAAC;IAED,MAAM,WAAW,GAAG;QAClB,EAAE;QACF,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC;QAC5C,UAAU,EAAE,CAAC,CAAC,SAAS;QACvB,cAAc,EAAE,CAAC,CAAC,SAAS;KAC5B,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,aACpB,KAAK,IAAI,CACR,KAAC,KAAK,IAAC,OAAO,EAAE,EAAE,YACf,KAAK,GACA,CACT,EACA,gBAAgB,IAAI,CACnB,eAAM,EAAE,EAAE,GAAG,EAAE,cAAc,EAAE,SAAS,EAAC,4BAA4B,YAAE,gBAAgB,GAAQ,CAChG,EACA,SAAS,KAAK,MAAM,IAAI,CACvB,KAAC,SAAS,OAAK,WAAW,KAAO,UAA8B,GAAI,CACpE,EACA,SAAS,KAAK,UAAU,IAAI,CAC3B,KAAC,QAAQ,OAAK,WAAW,KAAO,UAA6B,GAAI,CAClE,EACA,SAAS,KAAK,QAAQ,IAAI,CACzB,KAAC,WAAW,OAAK,WAAW,KAAO,UAAgC,GAAI,CACxE,EACA,SAAS,KAAK,MAAM,IAAI,CACvB,KAAC,SAAS,OAAK,WAAW,KAAO,UAA8B,GAAI,CACpE,EACA,SAAS,KAAK,cAAc,IAAI,CAC/B,KAAC,oBAAoB,OAAK,WAAW,KAAO,UAAyC,GAAI,CAC1F,EACA,SAAS,KAAK,gBAAgB,IAAI,CACjC,KAAC,cAAc,OAAK,WAAW,KAAO,UAAmC,GAAI,CAC9E,EACA,SAAS,KAAK,YAAY,IAAI,CAC7B,KAAC,UAAU,OAAK,WAAW,KAAO,UAA+B,GAAI,CACtE,EACA,SAAS,KAAK,gBAAgB,IAAI,CACjC,KAAC,cAAc,OAAK,WAAW,KAAO,UAAmC,GAAI,CAC9E,EACA,SAAS,KAAK,UAAU,IAAI,CAC3B,KAAC,QAAQ,OAAK,WAAW,KAAO,UAA6B,GAAI,CAClE,EACA,SAAS,KAAK,UAAU,IAAI,CAC3B,KAAC,aAAa,OAAK,WAAW,KAAO,UAAkC,GAAI,CAC5E,EACA,SAAS,KAAK,eAAe,IAAI,CAChC,KAAC,aAAa,OAAK,WAAW,KAAO,UAAkC,GAAI,CAC5E,EACA,SAAS,KAAK,QAAQ,IAAI,CACzB,KAAC,MAAM,OAAK,WAAW,KAAO,UAA2B,GAAI,CAC9D,EACA,SAAS,KAAK,OAAO,IAAI,CACxB,KAAC,gBAAgB,OAAK,WAAW,KAAO,UAAqC,GAAI,CAClF,EACA,CAAC,CAAC,cAAc,IAAI,aAAa,CAAC,IAAI,SAAS,CAAC,IAAI,CACnD,eAAK,SAAS,EAAC,wBAAwB,aACpC,SAAS,IAAI,CACZ,gBAAM,SAAS,EAAC,+BAA+B,EAAC,EAAE,EAAE,GAAG,EAAE,QAAQ,aAC/D,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,EAAE,IAAI,EAAC,gBAAgB,GAAG,EACvC,SAAS,IACL,CACR,EACA,cAAc,IAAI,aAAa,IAAI,CAClC,aAAG,IAAI,EAAE,aAAa,gBAAc,GAAG,KAAK,cAAc,EAAE,SAAS,EAAC,gCAAgC,aACnG,cAAc,EACd,GAAG,EACJ,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,EAAE,IAAI,EAAC,gBAAgB,GAAG,IACtC,CACL,IACG,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/formField/FormField.stories.d.ts

@@ -116,4 +116,8 @@ export declare const WithDatePicker: Story;
 export declare const OptionalAndRequiredFields: Story;
 export declare const WithColourPicker: Story;
 export declare const CompleteStudentForm: Story;
+export declare const WithCheckbox: Story;
+export declare const WithCheckboxGroup: Story;
+export declare const WithToggle: Story;
+export declare const WithRadio: Story;
 //# sourceMappingURL=FormField.stories.d.ts.map

package/dist/components/formField/FormField.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.stories.d.ts","sourceRoot":"","sources":["../../../src/components/formField/FormField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAY5D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAwI3C,iBAAS,iBAAiB,gCAmBzB;AAMD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6HwB,CAAC;AAEnC,eAAe,IAAI,CAAC;AAIpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAuBxC,eAAO,MAAM,OAAO,EAAE,KAarB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAgElC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KA0E5B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAqEvB,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,KAgD1C,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KA+CpC,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KA2DtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KA2EtB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA8GzB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAyEvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAgHhC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAoE1B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAuE5B,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KA0FvC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAsE9B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAqMjC,CAAC"}
+{"version":3,"file":"FormField.stories.d.ts","sourceRoot":"","sources":["../../../src/components/formField/FormField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAY5D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAmK3C,iBAAS,iBAAiB,gCAmBzB;AAMD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmIwB,CAAC;AAEnC,eAAe,IAAI,CAAC;AAIpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAuBxC,eAAO,MAAM,OAAO,EAAE,KAarB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAgElC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KA0E5B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAqEvB,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,KAgD1C,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KA+CpC,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KA2DtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KA2EtB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA8GzB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAyEvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAgHhC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAoE1B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAuE5B,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KA0FvC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAsE9B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAqMjC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA+F1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAwF/B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KA+FxB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAwEvB,CAAC"}

package/dist/components/formField/FormField.stories.js

@@ -8,7 +8,7 @@ import { FormField } from './FormField.js';
 // ---------------------------------------------------------------------------
 const DESCRIPTION_INTRO = [
     'FormField is the **complete form field assembly**: it wires together a label, an optional',
-    'description, any of eight input controls, an optional helper link, and an error message — all',
+    'description, any of thirteen input controls, an optional helper link, and an error message — all',
     'with the correct accessibility connections built in automatically.',
     '',
     'Think of it as a filing cabinet drawer with everything pre-labelled: you tell it what kind of',
@@ -34,7 +34,7 @@ const USAGE_GUIDANCE = [
     '',
     '---',
     '',
-    '### The eight input types',
+    '### The thirteen input types',
     '',
     '| `inputType` | Renders | Typical use |',
     '|---|---|---|',
@@ -45,7 +45,12 @@ const USAGE_GUIDANCE = [
     '| `"colourPicker"` | `ColourPickerDropdown` | Form group or subject colour |',
     '| `"selectDropdown"` | `SelectDropdown` | Year group, term, single or multi select |',
     '| `"datePicker"` | `DatePicker` | Date of birth, enrolment date |',
+    '| `"dateTimePicker"` | `DateTimePicker` | Event date and time together |',
     '| `"combobox"` | `Combobox` | Searchable people picker, tutor assignment |',
+    '| `"checkbox"` | `CheckboxInput` | Single opt-in, consent, acknowledgement |',
+    '| `"checkboxGroup"` | `CheckboxGroup` | Several independent selections (support needs, alert recipients) |',
+    '| `"toggle"` | `Toggle` | Instant on/off settings embedded in a form |',
+    '| `"radio"` | `RadioButtonGroup` | One choice from a short, mutually-exclusive list |',
 ].join('\n');
 const DEVELOPER_NOTES = [
     '### Critical gotchas — read before using',
@@ -91,6 +96,25 @@ const DEVELOPER_NOTES = [
     'This is a known limitation — Confluence guidance says it should open a new tab, but the current',
     'implementation does not do this. Bear it in mind when linking to external documentation.',
     '',
+    '**12. `"checkbox"`, `"checkboxGroup"`, `"toggle"`, and `"radio"` all require `inputProps`.** Every',
+    'other `inputType` has optional `inputProps`; these four do not — the union marks them as required',
+    'because each underlying component needs at least `checked`/`checkedValue` and an `onChange`',
+    '(or `onCheckedChange`) to be usable at all.',
+    '',
+    '**13. `"checkbox"` and `"checkboxGroup"` name themselves via `inputProps`, not the top-level',
+    '`label`.** `CheckboxInput` renders its own inline `label` beside the box; `CheckboxGroup` renders',
+    'a `<legend>` via `inputProps.legend`. Providing FormField\'s top-level `label` as well produces a',
+    'second, redundant heading — pick one.',
+    '',
+    '**14. `"toggle"` is the one case where the top-level `label` prop is doing real work.** Standalone',
+    '`Toggle` has no visible label and needs one hand-rolled; inside FormField, the top-level `label`',
+    'renders the `<Label htmlFor={id}>` for you, so `Toggle` gets a proper accessible label for free.',
+    '',
+    '**15. `"radio"` matches `checkedValue` against `option.value`, not `option.id`.** `id` only',
+    'supplies the React key. Also note `RadioButtonGroup` is controlled from one `checkedValue` +',
+    '`onChange` at the group level, unlike `CheckboxGroup` where every option carries its own',
+    '`checked` + `onChange`.',
+    '',
     '---',
     '',
     '### Accessibility',
@@ -128,7 +152,10 @@ const RELATED_COMPONENTS = [
     '[DatePicker](?path=/docs/components-datepicker--docs) · ',
     '[Combobox](?path=/docs/components-combobox--docs) · ',
     '[Fieldset](?path=/docs/components-formfield-fieldset--docs) · ',
-    '[Label](?path=/docs/components-formfield-inputs-label--docs)',
+    '[Label](?path=/docs/components-formfield-inputs-label--docs) · ',
+    '[CheckboxInput](?path=/docs/components-formfield-inputs-checkbox--docs) · ',
+    '[RadioButtonInput](?path=/docs/components-formfield-inputs-radiobutton--docs) · ',
+    '[Toggle](?path=/docs/components-toggle--docs)',
 ].join('\n');
 const PROPS_INTRO = 'The preview below is wired to the **Controls** panel — tweak any prop to see the story update in real time.';
 function FormFieldDocsPage() {
@@ -172,7 +199,7 @@ const meta = {
         },
         inputType: {
             control: 'select',
-            options: ['text', 'textarea', 'number', 'time', 'colourPicker', 'selectDropdown', 'datePicker', 'combobox'],
+            options: ['text', 'textarea', 'number', 'time', 'colourPicker', 'selectDropdown', 'datePicker', 'combobox', 'checkbox', 'checkboxGroup', 'toggle', 'radio'],
             description: [
                 'Determines which input component is rendered.',
                 'Defaults to `"text"` (renders `TextInput`).',
@@ -181,10 +208,15 @@ const meta = {
                 '`"colourPicker"` → `ColourPickerDropdown` (hex colour sketch picker in a dropdown);',
                 '`"selectDropdown"` → `SelectDropdown` (single or multi select with grouping);',
                 '`"datePicker"` → `DatePicker` (calendar popover);',
-                '`"combobox"` → `Combobox` (searchable, type-ahead).',
+                '`"combobox"` → `Combobox` (searchable, type-ahead);',
+                '`"checkbox"` → `CheckboxInput` (single opt-in/consent);',
+                '`"checkboxGroup"` → `CheckboxGroup` (several independent selections);',
+                '`"toggle"` → `Toggle` (instant on/off switch);',
+                '`"radio"` → `RadioButtonGroup` (one choice from a short list).',
+                'The last four require `inputProps` — see the developer notes.',
             ].join(' '),
             table: {
-                type: { summary: "'text' | 'textarea' | 'number' | 'time' | 'colourPicker' | 'selectDropdown' | 'datePicker' | 'combobox'" },
+                type: { summary: "'text' | 'textarea' | 'number' | 'time' | 'colourPicker' | 'selectDropdown' | 'datePicker' | 'combobox' | 'checkbox' | 'checkboxGroup' | 'toggle' | 'radio'" },
                 defaultValue: { summary: "'text'" },
             },
         },
@@ -256,9 +288,10 @@ const meta = {
                 '**Do NOT set `hasError`, `aria-invalid`, or `aria-describedby` here** — FormField builds',
                 'these automatically. They are spread BEFORE `inputProps` and will be overridden.',
                 'The Controls panel cannot represent this discriminated union — configure it in the story code.',
+                '**Required, not optional, for `"checkbox"`, `"checkboxGroup"`, `"toggle"`, and `"radio"`.**',
             ].join(' '),
             table: {
-                type: { summary: 'TextInputProps | TextAreaProps | NumberInputProps | TimeInputProps | ColourPickerDropdownProps | SelectDropdownInputProps | DatePickerProps | ComboboxProps' },
+                type: { summary: 'TextInputProps | TextAreaProps | NumberInputProps | TimeInputProps | ColourPickerDropdownProps | SelectDropdownInputProps | DatePickerProps | DateTimePickerProps | ComboboxProps | CheckboxInputProps | CheckboxGroupProps | Toggle.Props | RadioButtonGroupProps' },
             },
         },
     },
@@ -1199,4 +1232,278 @@ export default CompleteStudentFormExample;
     '',
     'This replaces the old `FormExample` story which used `"1rem"` gaps and non-school copy.',
 ].join('\n'));
+export const WithCheckbox = withDescription({
+    parameters: {
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { FormField } from '@arbor-education/design-system.components';
+
+function WithCheckboxExample() {
+  return (
+    <div style={{ maxWidth: '28rem', display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }}>
+      <FormField
+        id="sms-alerts-opt-in"
+        inputType="checkbox"
+        fieldDescription="Sent for unexplained absences and behaviour incidents"
+        inputProps={{
+          label: 'Notify parents by SMS',
+          checked: true,
+          onChange: (event) => console.log(event.target.checked),
+        }}
+      />
+      <FormField
+        id="data-accuracy-ack"
+        inputType="checkbox"
+        inputProps={{
+          label: 'I confirm this record is accurate and up to date',
+          checked: false,
+          onChange: (event) => console.log(event.target.checked),
+        }}
+      />
+      <FormField
+        id="parental-consent"
+        inputType="checkbox"
+        errorText="You must confirm parental consent before submitting"
+        inputProps={{
+          label: 'I have obtained parental consent',
+          checked: false,
+          onChange: (event) => console.log(event.target.checked),
+        }}
+      />
+    </div>
+  );
+}
+export default WithCheckboxExample;
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsxs("div", { style: { maxWidth: '28rem', padding: 'var(--spacing-xlarge)', display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }, children: [_jsx(FormField, { id: "sms-alerts-opt-in", inputType: "checkbox", fieldDescription: "Sent for unexplained absences and behaviour incidents", inputProps: {
+                    label: 'Notify parents by SMS',
+                    checked: true,
+                    onChange: fn(),
+                } }), _jsx(FormField, { id: "data-accuracy-ack", inputType: "checkbox", inputProps: {
+                    label: 'I confirm this record is accurate and up to date',
+                    checked: false,
+                    onChange: fn(),
+                } }), _jsx(FormField, { id: "parental-consent", inputType: "checkbox", errorText: "You must confirm parental consent before submitting", inputProps: {
+                    label: 'I have obtained parental consent',
+                    checked: false,
+                    onChange: fn(),
+                } })] })),
+}, [
+    '`inputType="checkbox"` renders a `CheckboxInput` and, unlike most other `inputType`s, its',
+    '`inputProps` are **required** — `CheckboxInput.Props` has no optional variant in the union.',
+    '',
+    '**Skip the top-level `label` prop for checkboxes.** `CheckboxInput` renders its own inline',
+    '`label` next to the box, inside the same `<label>` element as the input. Setting FormField\'s',
+    'top-level `label` as well produces two separate label texts stacked above and beside the box.',
+    'Use `fieldDescription` for supporting copy instead — it still renders above the input.',
+    '',
+    '**`checked` has no default and must be controlled.** There is no `defaultChecked` escape hatch',
+    'the way there is on `Toggle` — pair `checked` with `onChange` or the box will never update.',
+].join('\n'));
+export const WithCheckboxGroup = withDescription({
+    parameters: {
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { FormField } from '@arbor-education/design-system.components';
+
+function WithCheckboxGroupExample() {
+  return (
+    <div style={{ maxWidth: '28rem', display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }}>
+      <FormField
+        id="support-needs"
+        inputType="checkboxGroup"
+        fieldDescription="Select all that currently apply — this can be updated at any time"
+        inputProps={{
+          legend: 'Support needs',
+          options: [
+            { id: 'autism', label: 'Autism spectrum', checked: true, onChange: (event) => console.log(event.target.checked) },
+            { id: 'dyslexia', label: 'Dyslexia', checked: false, onChange: (event) => console.log(event.target.checked) },
+            { id: 'eal', label: 'EAL support', checked: false, onChange: (event) => console.log(event.target.checked) },
+          ],
+        }}
+      />
+      <FormField
+        id="consent-forms"
+        inputType="checkboxGroup"
+        errorText="Select at least one consent option before continuing"
+        inputProps={{
+          legend: 'Consent forms received',
+          options: [
+            { id: 'medical', label: 'Medical consent', checked: false, onChange: (event) => console.log(event.target.checked) },
+            { id: 'photo', label: 'Photo consent', checked: false, onChange: (event) => console.log(event.target.checked) },
+          ],
+        }}
+      />
+    </div>
+  );
+}
+export default WithCheckboxGroupExample;
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsxs("div", { style: { maxWidth: '28rem', padding: 'var(--spacing-xlarge)', display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }, children: [_jsx(FormField, { id: "support-needs", inputType: "checkboxGroup", fieldDescription: "Select all that currently apply \u2014 this can be updated at any time", inputProps: {
+                    legend: 'Support needs',
+                    options: [
+                        { id: 'autism', label: 'Autism spectrum', checked: true, onChange: fn() },
+                        { id: 'dyslexia', label: 'Dyslexia', checked: false, onChange: fn() },
+                        { id: 'eal', label: 'EAL support', checked: false, onChange: fn() },
+                    ],
+                } }), _jsx(FormField, { id: "consent-forms", inputType: "checkboxGroup", errorText: "Select at least one consent option before continuing", inputProps: {
+                    legend: 'Consent forms received',
+                    options: [
+                        { id: 'medical', label: 'Medical consent', checked: false, onChange: fn() },
+                        { id: 'photo', label: 'Photo consent', checked: false, onChange: fn() },
+                    ],
+                } })] })),
+}, [
+    '`inputType="checkboxGroup"` renders a `CheckboxGroup` — a `Fieldset` wrapping one `CheckboxInput`',
+    'per entry in `inputProps.options`. Like `"checkbox"`, `inputProps` is **required**.',
+    '',
+    '**Use `inputProps.legend`, not FormField\'s top-level `label`, to name the group.** `Fieldset`',
+    'renders its own `<legend>` — set it via `legend` inside `inputProps`. FormField\'s top-level',
+    '`label` still renders (as a standalone `<Label>` above the fieldset) if you provide one, so pick',
+    'one or the other to avoid two headings for the same group.',
+    '',
+    '**Each option manages its own `checked` and `onChange`.** Unlike `RadioButtonGroup`, there is no',
+    'single group-level value — every entry in `options` needs its own `checked` boolean and `onChange`',
+    'handler. `option.id` doubles as the React key.',
+].join('\n'));
+export const WithToggle = withDescription({
+    parameters: {
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { FormField } from '@arbor-education/design-system.components';
+
+function WithToggleExample() {
+  return (
+    <div style={{ maxWidth: '28rem', display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }}>
+      <FormField
+        id="weekly-summary-emails"
+        label="Weekly summary emails"
+        inputType="toggle"
+        fieldDescription="Sent every Friday afternoon with attendance and behaviour highlights"
+        inputProps={{
+          defaultChecked: true,
+          onCheckedChange: (checked) => console.log(checked),
+        }}
+      />
+      <FormField
+        id="two-factor-auth"
+        label="Require two-factor authentication"
+        inputType="toggle"
+        inputProps={{
+          defaultChecked: false,
+          onCheckedChange: (checked) => console.log(checked),
+        }}
+      />
+      <FormField
+        id="marketing-emails"
+        label="Marketing emails"
+        inputType="toggle"
+        errorText="You must accept the updated marketing preferences to continue"
+        inputProps={{
+          defaultChecked: false,
+          onCheckedChange: (checked) => console.log(checked),
+        }}
+      />
+    </div>
+  );
+}
+export default WithToggleExample;
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsxs("div", { style: { maxWidth: '28rem', padding: 'var(--spacing-xlarge)', display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }, children: [_jsx(FormField, { id: "weekly-summary-emails", label: "Weekly summary emails", inputType: "toggle", fieldDescription: "Sent every Friday afternoon with attendance and behaviour highlights", inputProps: {
+                    defaultChecked: true,
+                    onCheckedChange: fn(),
+                } }), _jsx(FormField, { id: "two-factor-auth", label: "Require two-factor authentication", inputType: "toggle", inputProps: {
+                    defaultChecked: false,
+                    onCheckedChange: fn(),
+                } }), _jsx(FormField, { id: "marketing-emails", label: "Marketing emails", inputType: "toggle", errorText: "You must accept the updated marketing preferences to continue", inputProps: {
+                    defaultChecked: false,
+                    onCheckedChange: fn(),
+                } })] })),
+}, [
+    '`inputType="toggle"` renders a `Toggle` (`inputProps` is `Toggle.Props` — Radix UI\'s `Switch.SwitchProps` plus `hasError` — and',
+    '— like the other three new types — it is **required**).',
+    '',
+    '**FormField solves Toggle\'s biggest standalone gotcha for you.** Used on its own, `Toggle` has',
+    'no visible label and needs a hand-rolled `<label htmlFor={id}>` (see the `Toggle` stories\' `WithLabel`',
+    'example). Inside FormField, the top-level `label` prop renders that `<Label htmlFor={id}>` for you',
+    'automatically — just provide `label` and `id` as normal, no manual pairing required.',
+    '',
+    '**`onCheckedChange` receives a boolean, not an event.** `(checked: boolean) => void` — there is',
+    'no `event.target.checked` to unwrap, unlike the native-input-backed `checkbox` and `radio` types.',
+].join('\n'));
+export const WithRadio = withDescription({
+    parameters: {
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { FormField } from '@arbor-education/design-system.components';
+
+function WithRadioExample() {
+  return (
+    <FormField
+      id="contact-method"
+      inputType="radio"
+      fieldDescription="Used for attendance and behaviour notifications only"
+      errorText="Please select a contact method"
+      inputProps={{
+        legend: 'Preferred contact method',
+        name: 'contact-method',
+        checkedValue: 'sms',
+        options: [
+          { id: 'phone', value: 'phone', label: 'Phone call' },
+          { id: 'email', value: 'email', label: 'Email' },
+          { id: 'sms', value: 'sms', label: 'SMS' },
+        ],
+        onChange: (event) => console.log(event.target.value),
+      }}
+    />
+  );
+}
+export default WithRadioExample;
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsx("div", { style: { maxWidth: '28rem', padding: 'var(--spacing-xlarge)' }, children: _jsx(FormField, { id: "contact-method", inputType: "radio", fieldDescription: "Used for attendance and behaviour notifications only", errorText: "Please select a contact method", inputProps: {
+                legend: 'Preferred contact method',
+                name: 'contact-method',
+                checkedValue: 'sms',
+                options: [
+                    { id: 'phone', value: 'phone', label: 'Phone call' },
+                    { id: 'email', value: 'email', label: 'Email' },
+                    { id: 'sms', value: 'sms', label: 'SMS' },
+                ],
+                onChange: fn(),
+            } }) })),
+}, [
+    '`inputType="radio"` renders a `RadioButtonGroup` — a `Fieldset` wrapping one radio per entry in',
+    '`inputProps.options`. `inputProps` is **required** and, unlike `CheckboxGroup`, the group is',
+    'controlled from a single place: `checkedValue` + one `onChange`, not per-option state.',
+    '',
+    '**`checkedValue` is compared against each `option.value`, not `option.id`.** `id` only supplies',
+    'the React key — set `value` on every option and match it against `checkedValue` to control which',
+    'radio is selected.',
+    '',
+    '**`name` is required by the type, and functionally mandatory** — without a shared `name`, the',
+    'native radios do not group and multiple can appear selected at once.',
+    '',
+    '**Use `inputProps.legend`, not FormField\'s top-level `label`,** to name the group — the same',
+    'convention as `checkboxGroup`.',
+].join('\n'));
 //# sourceMappingURL=FormField.stories.js.map