@workday/canvas-kit-docs 16.0.15 → 16.0.17

package/dist/es6/lib/stackblitzFiles/packageJSONFile.js

@@ -18,11 +18,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "16.0.15",
-    "@workday/canvas-kit-preview-react": "16.0.15",
-    "@workday/canvas-kit-react": "16.0.15",
-    "@workday/canvas-kit-react-fonts": "^16.0.15",
-    "@workday/canvas-kit-styling": "16.0.15",
+    "@workday/canvas-kit-labs-react": "16.0.17",
+    "@workday/canvas-kit-preview-react": "16.0.17",
+    "@workday/canvas-kit-react": "16.0.17",
+    "@workday/canvas-kit-react-fonts": "^16.0.17",
+    "@workday/canvas-kit-styling": "16.0.17",
     "@workday/canvas-system-icons-web": "^5.0.3",
     "@workday/canvas-expressive-icons-web": "1.0.1",
     "@workday/canvas-tokens-web": "4.4.0-beta.11"

package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts

@@ -19,11 +19,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "16.0.15",
-    "@workday/canvas-kit-preview-react": "16.0.15",
-    "@workday/canvas-kit-react": "16.0.15",
-    "@workday/canvas-kit-react-fonts": "^16.0.15",
-    "@workday/canvas-kit-styling": "16.0.15",
+    "@workday/canvas-kit-labs-react": "16.0.17",
+    "@workday/canvas-kit-preview-react": "16.0.17",
+    "@workday/canvas-kit-react": "16.0.17",
+    "@workday/canvas-kit-react-fonts": "^16.0.17",
+    "@workday/canvas-kit-styling": "16.0.17",
     "@workday/canvas-system-icons-web": "^5.0.3",
     "@workday/canvas-expressive-icons-web": "1.0.1",
     "@workday/canvas-tokens-web": "4.4.0-beta.11"

package/dist/mdx/agent-skills/Overview.mdx

@@ -0,0 +1,57 @@
+# Agent Skills
+
+Canvas Kit ships a **consumer-facing** skill set for AI coding agents (Cursor, Claude, Copilot, and
+similar tools). Each skill is a `SKILL.md` file under [`skills/`](../../../../skills/README.md) in
+this repository. Agents load them to write, style, migrate, and review UI that follows Canvas Kit
+correctly.
+
+These skills target the **current generation**: Canvas Kit **v16** +
+`@workday/canvas-tokens-web` **4.4** (Sana Canvas theme). They do **not** cover maintainer-only
+concerns (`system.legacy.*` in `modules/**/lib/**`, Chromatic class twins, publishing) — see
+[`AGENTS.md`](../../../../AGENTS.md) and [`STYLE.md`](../../../../STYLE.md) for that workflow.
+
+## Installing skills
+
+Copy or symlink the [`skills/`](../../../../skills/) directory into your editor's skills location
+(for example `.cursor/skills/` or `.claude/skills/`), or point your agent configuration at the
+folder in a checkout of this repo.
+
+Start every version-sensitive task with the **Version Detection** skill so tables from other skills
+match what's installed in `node_modules`.
+
+## Skill catalog
+
+| Skill | Use when | Source on GitHub |
+| ----- | -------- | ---------------- |
+| [Version Detection](../../../../skills/sana-canvas-kit-version/SKILL.md) | Detect installed Canvas Kit / tokens-web versions; lookup upgrade guides | [references.md](../../../../skills/sana-canvas-kit-version/references.md) |
+| [Tokens](../../../../skills/sana-canvas-kit-tokens/SKILL.md) | Pick tokens by role; accessible color pairings; CSS-variable troubleshooting | [references.md](../../../../skills/sana-canvas-kit-tokens/references.md) |
+| [Styling](../../../../skills/sana-canvas-kit-styling/SKILL.md) | `createStyles`, `createStencil`, `cs`, layout without `Box`/`Flex` | — |
+| [Design Principles](../../../../skills/sana-canvas-kit-design-principles/SKILL.md) | Which component fits a use case; dos/don'ts snapshot | [references/components.md](../../../../skills/sana-canvas-kit-design-principles/references/components.md) |
+| [Accessibility](../../../../skills/sana-canvas-kit-accessibility/SKILL.md) | Labels, keyboard, focus, popups, forms, live regions | [references.md](../../../../skills/sana-canvas-kit-accessibility/references.md) |
+| [Component Selection](../../../../skills/sana-canvas-kit-component-selection/SKILL.md) | Avoid `@deprecated` exports; Main vs Preview vs Labs | [references.md](../../../../skills/sana-canvas-kit-component-selection/references.md) |
+| [Icons](../../../../skills/sana-canvas-kit-icons/SKILL.md) | System/expressive icons; `icon-migration` codemod | — |
+| [Migration](../../../../skills/sana-canvas-kit-migration/SKILL.md) | Run `@workday/canvas-kit-codemod` across majors | [references.md](../../../../skills/sana-canvas-kit-migration/references.md) |
+| [Builder](../../../../skills/sana-canvas-kit-builder/SKILL.md) | Custom components with Canvas Kit factories | — |
+| [Review](../../../../skills/sana-canvas-kit-review/SKILL.md) | Report-only design-system compliance check on a diff | — |
+
+Full index and dependency notes: [`skills/README.md`](../../../../skills/README.md).
+
+## How skills depend on each other
+
+Run **Version Detection** first whenever another skill's guidance might be release-specific.
+
+```
+version → tokens, styling, component-selection, icons, migration, review
+tokens → styling, design-principles, accessibility, builder, review
+component-selection → accessibility, icons, review
+accessibility → design-principles, builder, review
+styling → builder, review
+design-principles → builder, review
+migration → review
+```
+
+## Related tooling
+
+- **Canvas Kit MCP** — runtime docs, upgrade guides, and accessibility scenarios for agents.
+  See [MCP Docs](../../../mcp/stories/mdx/MCPDocs.mdx) (under **AI For LLMs** in the sidebar).
+- **Maintainer agent guide** — [`AGENTS.md`](../../../../AGENTS.md) for contributing to this repo.

package/dist/mdx/react/checkbox/Checkbox.mdx

@@ -1,8 +1,4 @@
-import {
-  ExampleCodeBlock,
-  Specifications,
-  SymbolDoc,
-} from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
 
 import Basic from './examples/Basic';
 import Caution from './examples/Caution';
@@ -34,7 +30,9 @@ yarn add @workday/canvas-kit-react
 
 Checkbox may be used on its own without [Form Field](/components/inputs/form-field/) since it
 includes a `<label>` with a `for` attribute referencing the underlying `<input type="checkbox">`
-element.
+element. For checkboxes grouped with **`FormFieldGroup`**, see
+[FormField accessibility](/components/inputs/form-field/#accessibility) for hint, error, caution,
+and required state wiring.
 
 <ExampleCodeBlock code={Basic} />
 
@@ -61,6 +59,9 @@ not all) of its children are checked.
 
 <ExampleCodeBlock code={Indeterminate} />
 
+> **Accessibility Note**: Use semantic unordered list markup so that screen readers can communicate
+> the nested hierarchy of the components to users.
+
 ### Ref Forwarding
 
 Checkbox supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html). It will forward
@@ -70,27 +71,32 @@ Checkbox supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html
 
 ### Label Position Horizontal
 
-Set the `orientation` prop of the Form Field to designate the position of the label relative to the
-input component. By default, the orientation will be set to `vertical`.
+Set the `orientation` prop of the wrapping FormFieldGroup to designate the position of the group
+label relative to the checkboxes. By default, the orientation will be set to `vertical`.
 
 <ExampleCodeBlock code={LabelPosition} />
 
 ### Required
 
-Set the `required` prop of a wrapping Form Field to `true` to indicate that the field is required.
-Labels for required fields are suffixed by a red asterisk.
+Set the `isRequired` prop of a wrapping FormFieldGroup to `true` to indicate that the field is
+required. Labels for required fields are suffixed by a red asterisk.
+
+A standalone checkbox does not need **`FormFieldGroup`**. This example wraps a single checkbox so
+`isRequired` can show the required asterisk on **`FormFieldGroup.Label`**. Use that wrapper only
+when the spec includes a required state (or a group name, hint, error, or caution). See
+[Accessibility](#accessibility).
 
 <ExampleCodeBlock code={Required} />
 
 ### Error States
 
-Set the `error` prop of the wrapping Form Field to `"caution"` or `"error"` to set the Checkbox to
-the Alert or Error state, respectively. You will also need to set the `hintId` and `hintText` props
-on the Form Field to meet accessibility standards. You may wish to omit the `label` prop on the Form
-Field given that Checkbox already includes a label.
+Set the `error` prop of the wrapping FormFieldGroup to `"caution"` or `"error"` to set the Checkbox
+to the Alert or Error state, respectively. Render `FormFieldGroup.Hint` with the message text so
+assistive technology can associate the hint with the group. Keep the Checkbox `label` so each
+control retains its own accessible name; `FormFieldGroup.Label` only provides the group name.
 
 The `error` prop may be applied directly to the Checkbox with a value of `"caution"` or `"error"` if
-Form Field is not being used.
+FormFieldGroup is not being used.
 
 #### Caution
 
@@ -105,6 +111,127 @@ Form Field is not being used.
 Checkbox supports custom styling via the `cs` prop. For more information, check our
 ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
 
+## Accessibility
+
+The primary accessibility goal is a visible, programmatically determinable name and a checked,
+unchecked, or mixed state that assistive technology can expose. Use **Checkbox** when the user can
+select zero, one, or many independent options. For mutually exclusive choices, use
+[**Radio**](https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-radio--docs) instead.
+When checkboxes answer the same question, or need hint, error, caution, or required association, see
+[FormField's accessibility documentation](/components/inputs/form-field/#accessibility).
+
+### Minimum Accessible Structure
+
+The following matches the [Basic Example](#basic-example): a **`Checkbox`** with a non-empty
+**`label`**. **`FormFieldGroup`** is not required for a single standalone checkbox with no hint,
+error, caution, or required state.
+
+```tsx
+import {Checkbox} from '@workday/canvas-kit-react/checkbox';
+
+<Checkbox label="I agree to the terms" />;
+```
+
+### Built-in Behaviors
+
+Canvas Kit applies these automatically on **`Checkbox`**. When checkboxes that answer the same
+question are composed with **`FormFieldGroup`** subcomponents, that grouping wiring is also applied
+automatically. **Do not duplicate them** in consuming code.
+
+**ARIA and DOM** (_applied by Checkbox_):
+
+- **`Checkbox`**: Renders a native `<input type="checkbox">`. Canvas Kit assigns an `id` with
+  `useUniqueId` unless you pass **`id`**.
+- **`label`**: Renders a visible `<label htmlFor={id}>` so the control has an accessible name and
+  clicking the text activates the input.
+- **`indeterminate`**: Sets `aria-checked="mixed"` and the input's native `indeterminate` property.
+  Otherwise `aria-checked` follows the **`checked`** prop.
+- **`disabled`**: Maps to the native `disabled` attribute.
+- **`ref`**: Forwards to the underlying `<input type="checkbox">`.
+
+**Keyboard** (_native checkbox behavior_):
+
+**`Checkbox`** uses native `<input type="checkbox">` keyboard behavior (tab order, Space to toggle,
+and label activation). Do not intercept <kbd>Space</kbd> or otherwise prevent the native toggle.
+
+**Screen reader expectations** (_when built-in behaviors are used as intended_):
+
+- On focus, assistive technology announces the Checkbox **`label`** and checked, unchecked, or mixed
+  state
+- Disabled checkboxes are announced as unavailable
+
+For group, hint, error, and required association, see
+[FormField's Built-in Behaviors](/components/inputs/form-field/#built-in-behaviors).
+
+### Accessibility Requirements
+
+Required in application code for an accessible Checkbox. Rows marked _(conditional)_ apply only when
+the situation matches—otherwise omit.
+
+**If no design spec is provided:** use a visible, non-empty Checkbox **`label`**. Omit
+**`FormFieldGroup`** unless the spec includes a group name, more than one independent option for the
+same question, or hint, error, caution, or required state. Omit **`FormFieldGroup.Hint`**,
+**`isRequired`**, **`error`**, **`indeterminate`**, **`disabled`**, a custom **`id`**, and a
+**`ref`** unless the spec requires them.
+
+**Choose a composition:**
+
+- Standalone **`Checkbox`** with **`label`** — one control with no hint, error, caution, or required
+  state
+- **`FormFieldGroup`** — one question with two or more independent options, or any checkbox that
+  needs a group name, hint, error, caution, or required state
+- Nested `<ul>` / `<li>` — parent checkbox with nested children and **`indeterminate`**. Do not use
+  **`FormFieldGroup`** for that hierarchy. Checkboxes that answer different questions stay in
+  separate compositions.
+
+**Programmatic focus** _(conditional — omit by default)_:
+
+Attach a `ref` only when the product must move focus to the checkbox after an action (for example,
+**Submit** in [Ref Forwarding](#ref-forwarding)). Do not attach a `ref` or call `focus()` unless the
+design or developer asks for it.
+
+| Requirement                             | How to satisfy                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Accessible name                         | Non-empty **`label`** on every **`Checkbox`**. **`FormFieldGroup.Label`** names the group only (`div` with an `id`); it is not a `<label>` and does not replace **`label`**.                                                                                                                                                                                                                                                         |
+| Group wiring _(conditional)_            | When the spec is one question with two or more independent options, or includes a group name, hint, error, caution, or required state: **`FormFieldGroup`** + **`FormFieldGroup.Label`** + **`FormFieldGroup.Input as={Checkbox}`**. Put hint, error, caution, and required on the group — see [FormField accessibility](/components/inputs/form-field/#accessibility). See [Required](#required) and [Error States](#error-states). |
+| Visual error or caution _(conditional)_ | When **`FormFieldGroup`** has `error="error"` or `error="caution"`, also set **`error`** on **`Checkbox`** to the same state so the visual ring appears. See [Caution](#caution) and [Error](#error).                                                                                                                                                                                                                                |
+| Indeterminate parent _(conditional)_    | When a parent checkbox's value depends on nested children and some (but not all) children are checked: set **`indeterminate`** on the parent **`Checkbox`**; keep a non-empty **`label`** on the parent and on each child; nest the children in a `<ul>` inside the parent's `<li>`. See [Indeterminate](#indeterminate).                                                                                                            |
+| Disabled _(conditional)_                | `disabled` on **`Checkbox`** when the spec marks the option unavailable. See [Disabled](#disabled).                                                                                                                                                                                                                                                                                                                                  |
+| Programmatic focus _(conditional)_      | `ref` on **`Checkbox`** (or **`FormFieldGroup.Input`**) and move focus when the product requires it — omit by default (see **Programmatic focus** above and [Ref Forwarding](#ref-forwarding)).                                                                                                                                                                                                                                      |
+
+**Summary for code generation:**
+
+- **REQUIRED:** non-empty **`label`**
+- **CONDITIONAL:** **`FormFieldGroup`** for one question with two or more independent options, or
+  for hint, error, caution, or required; **`error`** on **`Checkbox`** when the group is in caution
+  or error; nested list + **`indeterminate`** for a parent/child tree; disabled; programmatic focus
+  via `ref`. See [FormField accessibility](/components/inputs/form-field/#accessibility) for group
+  hint, error, caution, and required.
+
+### Anti-Patterns
+
+Do **not** generate code that does the following (see **Accessibility Requirements** above for what
+to supply instead):
+
+- Manually set `aria-checked` or `htmlFor` on **`Checkbox`**, or pass an **`id`** when the spec does
+  not require a known id — Canvas Kit wires `aria-checked` and `htmlFor`, and assigns an `id` with
+  `useUniqueId` unless you pass one (see **If no design spec is provided**)
+- Ignore **Choose a composition** — do not wrap a standalone checkbox with no group name, hint,
+  error, caution, or required state in **`FormFieldGroup`**; do not put different questions in one
+  group; do not use **`FormFieldGroup`** for a parent/child indeterminate tree
+- Wrap **`Checkbox`** with **`FormField.Input`** — **`Checkbox`** already renders its own `<label>`.
+  When a group is required, use **`FormFieldGroup.Input as={Checkbox}`** (see **Group wiring**)
+- Omit **`label`** because **`FormFieldGroup.Label`** is present — the group label does not name the
+  individual control
+- Set `aria-checked="mixed"` without **`indeterminate`**
+- Use **`aria-disabled`** instead of **`disabled`** — **`Checkbox`** maps unavailability to the
+  native **`disabled`** prop
+- Use **`disabled`** when the spec says users must still focus the control to hear why it is
+  unavailable. Only in that case keep the checkbox enabled and put the explanation in
+  **`FormFieldGroup.Hint`** or on an adjacent focusable control
+- Use **Checkbox** for mutually exclusive choices — use
+  [**Radio**](https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-radio--docs) instead
+
 ## Component API
 
 <SymbolDoc name="Checkbox" fileName="/react/" />

package/dist/mdx/react/checkbox/examples/Basic.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
-import {FormField} from '@workday/canvas-kit-react/form-field';
 
 export default () => {
   const [checked, setChecked] = React.useState(false);
@@ -10,17 +9,5 @@ export default () => {
     setChecked(event.target.checked);
   };
 
-  return (
-    <FormField>
-      <FormField.Label>Confirm</FormField.Label>
-      <FormField.Field>
-        <FormField.Input
-          as={Checkbox}
-          checked={checked}
-          label="I agree to the terms"
-          onChange={handleChange}
-        />
-      </FormField.Field>
-    </FormField>
-  );
+  return <Checkbox checked={checked} label="I agree to the terms" onChange={handleChange} />;
 };

package/dist/mdx/react/checkbox/examples/Caution.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormFieldGroup} from '@workday/canvas-kit-react/form-field';
 
 export default () => {
   const [checked, setChecked] = React.useState(false);
@@ -11,17 +11,18 @@ export default () => {
   };
 
   return (
-    <FormField error="caution">
-      <FormField.Label>Confirm</FormField.Label>
-      <FormField.Field>
-        <FormField.Input
+    <FormFieldGroup error="caution">
+      <FormFieldGroup.Label>Confirm</FormFieldGroup.Label>
+      <FormFieldGroup.Field>
+        <FormFieldGroup.Input
           as={Checkbox}
           checked={checked}
+          error={Checkbox.ErrorType.Caution}
           label="I agree to the terms"
           onChange={handleChange}
         />
-        <FormField.Hint>You must agree to the terms before proceeding</FormField.Hint>
-      </FormField.Field>
-    </FormField>
+        <FormFieldGroup.Hint>You must agree to the terms before proceeding</FormFieldGroup.Hint>
+      </FormFieldGroup.Field>
+    </FormFieldGroup>
   );
 };

package/dist/mdx/react/checkbox/examples/Disabled.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
-import {FormField} from '@workday/canvas-kit-react/form-field';
 
 export default () => {
   const [checked, setChecked] = React.useState(false);
@@ -11,17 +10,6 @@ export default () => {
   };
 
   return (
-    <FormField>
-      <FormField.Label>Confirm</FormField.Label>
-      <FormField.Field>
-        <FormField.Input
-          as={Checkbox}
-          checked={checked}
-          disabled={true}
-          label="I agree to the terms"
-          onChange={handleChange}
-        />
-      </FormField.Field>
-    </FormField>
+    <Checkbox checked={checked} disabled label="I agree to the terms" onChange={handleChange} />
   );
 };

package/dist/mdx/react/checkbox/examples/Error.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormFieldGroup} from '@workday/canvas-kit-react/form-field';
 
 export default () => {
   const [checked, setChecked] = React.useState(false);
@@ -11,17 +11,18 @@ export default () => {
   };
 
   return (
-    <FormField error="error">
-      <FormField.Label>Confirm</FormField.Label>
-      <FormField.Field>
-        <FormField.Input
+    <FormFieldGroup error="error">
+      <FormFieldGroup.Label>Confirm</FormFieldGroup.Label>
+      <FormFieldGroup.Field>
+        <FormFieldGroup.Input
           as={Checkbox}
           checked={checked}
+          error={Checkbox.ErrorType.Error}
           label="I agree to the terms"
           onChange={handleChange}
         />
-        <FormField.Hint>You must agree to the terms before proceeding</FormField.Hint>
-      </FormField.Field>
-    </FormField>
+        <FormFieldGroup.Hint>You must agree to the terms before proceeding</FormFieldGroup.Hint>
+      </FormFieldGroup.Field>
+    </FormFieldGroup>
   );
 };

package/dist/mdx/react/checkbox/examples/Indeterminate.tsx

@@ -1,13 +1,24 @@
 import React from 'react';
 
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
-import {Box} from '@workday/canvas-kit-react/layout';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
-const styleOverrides = createStyles({
+const listStyles = createStyles({
+  listStyle: 'none',
+  margin: 0,
+  padding: 0,
+});
+
+const nestedListStyles = createStyles({
+  listStyle: 'none',
+  margin: 0,
   marginInlineStart: system.gap.xl,
   marginBlockStart: system.gap.sm,
+  padding: 0,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: system.gap.sm,
 });
 
 export default () => {
@@ -59,23 +70,26 @@ export default () => {
   };
 
   return (
-    <>
-      <Checkbox
-        checked={pizzaChecked}
-        indeterminate={pizzaIndeterminate}
-        label="Supreme Pizza Toppings"
-        onChange={handlePizzaChange}
-      />
-      <Box cs={styleOverrides}>
-        {toppings.map((topping, index) => (
-          <Checkbox
-            checked={topping.checked}
-            key={topping.name}
-            label={topping.name}
-            onChange={event => handleToppingChange(event, index)}
-          />
-        ))}
-      </Box>
-    </>
+    <ul className={listStyles}>
+      <li>
+        <Checkbox
+          checked={pizzaChecked}
+          indeterminate={pizzaIndeterminate}
+          label="Supreme Pizza Toppings"
+          onChange={handlePizzaChange}
+        />
+        <ul className={nestedListStyles}>
+          {toppings.map((topping, index) => (
+            <li key={topping.name}>
+              <Checkbox
+                checked={topping.checked}
+                label={topping.name}
+                onChange={event => handleToppingChange(event, index)}
+              />
+            </li>
+          ))}
+        </ul>
+      </li>
+    </ul>
   );
 };

package/dist/mdx/react/checkbox/examples/LabelPosition.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormFieldGroup} from '@workday/canvas-kit-react/form-field';
 
 export default () => {
   const [checked, setChecked] = React.useState(false);
@@ -11,16 +11,16 @@ export default () => {
   };
 
   return (
-    <FormField orientation="horizontalStart">
-      <FormField.Label>Confirm</FormField.Label>
-      <FormField.Field>
-        <FormField.Input
+    <FormFieldGroup orientation="horizontalStart">
+      <FormFieldGroup.Label>Confirm</FormFieldGroup.Label>
+      <FormFieldGroup.Field>
+        <FormFieldGroup.Input
           as={Checkbox}
           checked={checked}
           label="I agree to the terms"
           onChange={handleChange}
         />
-      </FormField.Field>
-    </FormField>
+      </FormFieldGroup.Field>
+    </FormFieldGroup>
   );
 };

package/dist/mdx/react/checkbox/examples/RefForwarding.tsx

@@ -2,45 +2,33 @@ import React from 'react';
 
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {Box} from '@workday/canvas-kit-react/layout';
-import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {changeFocus} from '@workday/canvas-kit-react/common';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
-const boxStyles = createStyles({
-  display: 'flex',
+const containerStyles = createStyles({
+  gap: system.gap.md,
+  alignItems: 'flex-start',
   flexDirection: 'column',
 });
 
 export default () => {
   const [checked, setChecked] = React.useState(false);
-  const ref = React.useRef(null);
+  const ref = React.useRef<HTMLInputElement>(null);
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setChecked(event.target.checked);
   };
 
   const handleClick = () => {
-    ref.current.click();
+    changeFocus(ref.current);
   };
 
   return (
-    <>
-      <Box cs={boxStyles}>
-        <FormField>
-          <FormField.Label>Confirm</FormField.Label>
-          <FormField.Field>
-            <FormField.Input
-              as={Checkbox}
-              checked={checked}
-              label="I agree to the terms"
-              onChange={handleChange}
-              ref={ref}
-            />
-          </FormField.Field>
-        </FormField>
-      </Box>
-      <PrimaryButton onClick={handleClick}>Check Agreement to Terms</PrimaryButton>
-    </>
+    <Flex cs={containerStyles}>
+      <Checkbox checked={checked} label="I agree to the terms" onChange={handleChange} ref={ref} />
+      <PrimaryButton onClick={handleClick}>Focus Checkbox</PrimaryButton>
+    </Flex>
   );
 };

package/dist/mdx/react/checkbox/examples/Required.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormFieldGroup} from '@workday/canvas-kit-react/form-field';
 
 export default () => {
   const [checked, setChecked] = React.useState(false);
@@ -11,16 +11,16 @@ export default () => {
   };
 
   return (
-    <FormField isRequired={true}>
-      <FormField.Label>Confirm</FormField.Label>
-      <FormField.Field>
-        <FormField.Input
+    <FormFieldGroup isRequired={true}>
+      <FormFieldGroup.Label>Confirm</FormFieldGroup.Label>
+      <FormFieldGroup.Field>
+        <FormFieldGroup.Input
           as={Checkbox}
           checked={checked}
           label="I agree to the terms"
           onChange={handleChange}
         />
-      </FormField.Field>
-    </FormField>
+      </FormFieldGroup.Field>
+    </FormFieldGroup>
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "16.0.15",
+  "version": "16.0.17",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -47,10 +47,10 @@
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
     "@workday/canvas-expressive-icons-web": "1.0.2",
-    "@workday/canvas-kit-labs-react": "^16.0.15",
-    "@workday/canvas-kit-preview-react": "^16.0.15",
-    "@workday/canvas-kit-react": "^16.0.15",
-    "@workday/canvas-kit-styling": "^16.0.15",
+    "@workday/canvas-kit-labs-react": "^16.0.17",
+    "@workday/canvas-kit-preview-react": "^16.0.17",
+    "@workday/canvas-kit-react": "^16.0.17",
+    "@workday/canvas-kit-styling": "^16.0.17",
     "@workday/canvas-system-icons-web": "^5.0.3",
     "@workday/canvas-tokens-web": "^4.4.0",
     "markdown-to-jsx": "^7.2.0",
@@ -63,5 +63,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "f4ae86b34eec3edc8e580c9384d4919da5ae2a76"
+  "gitHead": "945e2de7e77180c089e101727dcfa3c04019759e"
 }