@workday/canvas-kit-docs 12.0.0-alpha.862-next.0 → 12.0.0-alpha.899-next.0

package/dist/mdx/labs-react/combobox/examples/NoClearButton.tsx

@@ -0,0 +1,87 @@
+import React, {ReactNode, ReactElement, FC, ChangeEvent} from 'react';
+import {
+  Combobox,
+  ComboboxProps,
+  ComboBoxMenuItemGroup,
+} from '@workday/canvas-kit-labs-react/combobox';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {StyledMenuItem, MenuItemProps} from '@workday/canvas-kit-react/menu';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+
+const autocompleteResult = (
+  textModifier: number,
+  disabled: boolean
+): ReactElement<MenuItemProps> => (
+  <StyledMenuItem isDisabled={disabled}>
+    Result
+    <span>
+      num<span>ber</span>
+    </span>
+    {textModifier}
+  </StyledMenuItem>
+);
+
+const simpleAutoComplete = (count: number, showDisabledItems, total = 5) =>
+  Array.apply(null, Array(count))
+    .map((_, i) => autocompleteResult(i, showDisabledItems && i === 0))
+    .splice(0, total);
+
+const groupOfResults = (
+  count: number,
+  showDisabledItems: boolean,
+  groupHeading: ReactNode = 'Group'
+): ComboBoxMenuItemGroup => ({
+  header: (
+    <StyledMenuItem>
+      <strong>{groupHeading}</strong>
+    </StyledMenuItem>
+  ),
+  items: simpleAutoComplete(count, showDisabledItems, 10),
+});
+
+const Autocomplete: FC<
+  Omit<ComboboxProps, 'children'> & {
+    group?: boolean;
+    showDisabledItems?: boolean;
+  }
+> = ({showClearButton, group, showDisabledItems = false, ...props}) => {
+  const [currentText, setCurrentText] = React.useState('');
+
+  const autocompleteCallback = (event: ChangeEvent<HTMLInputElement>): void => {
+    setCurrentText(event.target.value);
+  };
+
+  const textLength = currentText.length;
+  const groupLength = Math.floor(textLength / 2);
+
+  return (
+    <Combobox
+      autocompleteItems={
+        group
+          ? [
+              groupOfResults(groupLength, showDisabledItems, <em>Animals</em>),
+              groupOfResults(Math.min(1, groupLength), showDisabledItems, 'Cars'),
+            ]
+          : simpleAutoComplete(textLength, showDisabledItems, 10)
+      }
+      onChange={autocompleteCallback}
+      showClearButton={showClearButton == null ? true : showClearButton}
+      labelId="autocomplete-123"
+      initialValue="Test"
+      {...props}
+    >
+      <TextInput placeholder="Autocomplete" />
+    </Combobox>
+  );
+};
+
+export default () => {
+  return (
+    <FormField id="autocomplete-123">
+      <FormField.Label>No clear button</FormField.Label>
+      <FormField.Field>
+        <FormField.Input as={Autocomplete} showClearButton={false} />
+      </FormField.Field>
+    </FormField>
+  );
+};

package/dist/mdx/labs-react/combobox/examples/RTL.tsx

@@ -0,0 +1,90 @@
+import React, {ReactNode, ReactElement, FC, ChangeEvent} from 'react';
+import {
+  Combobox,
+  ComboboxProps,
+  ComboBoxMenuItemGroup,
+} from '@workday/canvas-kit-labs-react/combobox';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {StyledMenuItem, MenuItemProps} from '@workday/canvas-kit-react/menu';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+
+const autocompleteResult = (
+  textModifier: number,
+  disabled: boolean
+): ReactElement<MenuItemProps> => (
+  <StyledMenuItem isDisabled={disabled}>
+    Result
+    <span>
+      num<span>ber</span>
+    </span>
+    {textModifier}
+  </StyledMenuItem>
+);
+
+const simpleAutoComplete = (count: number, showDisabledItems, total = 5) =>
+  Array.apply(null, Array(count))
+    .map((_, i) => autocompleteResult(i, showDisabledItems && i === 0))
+    .splice(0, total);
+
+const groupOfResults = (
+  count: number,
+  showDisabledItems: boolean,
+  groupHeading: ReactNode = 'Group'
+): ComboBoxMenuItemGroup => ({
+  header: (
+    <StyledMenuItem>
+      <strong>{groupHeading}</strong>
+    </StyledMenuItem>
+  ),
+  items: simpleAutoComplete(count, showDisabledItems, 10),
+});
+
+const Autocomplete: FC<
+  Omit<ComboboxProps, 'children'> & {
+    group?: boolean;
+    showDisabledItems?: boolean;
+  }
+> = ({showClearButton, group, showDisabledItems = false, ...props}) => {
+  const [currentText, setCurrentText] = React.useState('');
+
+  const autocompleteCallback = (event: ChangeEvent<HTMLInputElement>): void => {
+    setCurrentText(event.target.value);
+  };
+
+  const textLength = currentText.length;
+  const groupLength = Math.floor(textLength / 2);
+
+  return (
+    <Combobox
+      autocompleteItems={
+        group
+          ? [
+              groupOfResults(groupLength, showDisabledItems, <em>Animals</em>),
+              groupOfResults(Math.min(1, groupLength), showDisabledItems, 'Cars'),
+            ]
+          : simpleAutoComplete(textLength, showDisabledItems, 10)
+      }
+      onChange={autocompleteCallback}
+      showClearButton={showClearButton == null ? true : showClearButton}
+      labelId="autocomplete-123"
+      initialValue="Test"
+      {...props}
+    >
+      <TextInput placeholder="Autocomplete" />
+    </Combobox>
+  );
+};
+
+export default () => {
+  return (
+    <CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
+      <FormField id="rtl-autocomplete-123">
+        <FormField.Label>RTL Autocomplete example</FormField.Label>
+        <FormField.Field>
+          <FormField.Input as={Autocomplete} />
+        </FormField.Field>
+      </FormField>
+    </CanvasProvider>
+  );
+};

package/dist/mdx/labs-react/expandable/Expandable.mdx

@@ -1,6 +1,4 @@
-import {Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
-
-import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 
 import StartIcon from './examples/StartIcon';
 import EndIcon from './examples/EndIcon';

package/dist/mdx/labs-react/search-form/SearchForm.mdx

@@ -1,7 +1,4 @@
-import {SymbolDoc} from '@workday/canvas-kit-docs';
-import {SearchForm} from '@workday/canvas-kit-labs-react/search-form';
-// examples
-import Basic from './examples/Basic';
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';import Basic from './examples/Basic';
 import CustomTheme from './examples/CustomTheme';
 import Grow from './examples/Grow';
 import RTL from './examples/RTL';

package/dist/mdx/preview-react/_examples/mdx/Forms.mdx

@@ -0,0 +1,9 @@
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
+import TextInputWithReactHookForm from './examples/TextInputWithReactHookForm';
+
+
+# Canvas Kit Forms Examples
+
+## Uncontrolled Text Inputs Using React Hook Form
+
+<ExampleCodeBlock code={TextInputWithReactHookForm} />

package/dist/mdx/preview-react/_examples/mdx/FormsWithFormik.mdx

@@ -0,0 +1,14 @@
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
+import SelectWithFormik from './examples/SelectWithFormik';
+import TextInputWithFormik from './examples/TextInputWithFormik';
+
+
+# Canvas Kit Examples
+
+## Select Using Formik
+
+<ExampleCodeBlock code={SelectWithFormik} />
+
+## Controlled Text Inputs Using Formik
+
+<ExampleCodeBlock code={TextInputWithFormik} />

package/dist/mdx/preview-react/_examples/{examples → mdx/examples}/SelectWithFormik.tsx

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import {useFormik} from 'formik';
 import {Select, useSelectModel} from '@workday/canvas-kit-react/select';
-import {
-  FormField,
-  useFormFieldInput,
-  useFormFieldModel,
-} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {

package/dist/mdx/preview-react/_examples/{examples → mdx/examples}/TextInputWithReactHookForm.tsx

@@ -7,7 +7,7 @@ import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {TertiaryButton, PrimaryButton} from '@workday/canvas-kit-react/button';
 import {Select} from '@workday/canvas-kit-react/select';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {visibleIcon, invisibleIcon} from '@workday/canvas-system-icons-web';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
 
@@ -24,6 +24,7 @@ const useYupValidationResolver: YupValidationResolver = validationSchema => {
       } catch (errors) {
         return {
           values: {},
+          //@ts-ignore
           errors: errors.inner.reduce(
             (allErrors, currentError) => ({
               ...allErrors,

package/dist/mdx/preview-react/divider/Divider.mdx

@@ -0,0 +1,36 @@
+import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+
+import {Divider} from '@workday/canvas-kit-preview-react/divider';
+import Basic from './examples/Basic';
+import CustomSpace from './examples/CustomSpace';
+
+
+# Divider
+
+A `Divider` segments and visually organizes content.
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-preview-react
+```
+
+## Usage
+
+Use a `Divider` to separate content and create visual hierarchy. Typically they are used between paragraph sections to indicate a break or shift in content. However, they can also be used as decorative elements to provide greater emphasis and visual hierarchy.
+
+### Basic Example
+
+By default, `Divider` renders a `<hr>` (horizontal rule) element with `0.5rem` of margin on top and bottom. The `space` prop allows you to adjust the vertical margin evenly. In the example below, the `Divider`s provide a subtle deliniation between each profile card without being as visually prominent as a `Card`. The `space` is adjusted to `0.25rem` which applied `0.125rem` to the top and bottom margin.
+
+<ExampleCodeBlock code={Basic} />
+
+### Custom Space
+
+You might also want to apply custom space to `Divider` where the top and bottom margin are not equal. The best way to achieve this is with `createStyles` and the `cs` property. In the example below, the `Divider` is applied as a decorative element to add emphasis to the section heading. Custom styles are defined in the `createStyles` function outside the component and are passed to `Divider`'s `cs` prop. These styles remove the top margin and set the bottom margin to `1rem`.
+
+<ExampleCodeBlock code={CustomSpace} />
+
+## Component API
+
+<SymbolDoc name="Divider" hideDescription />

package/dist/mdx/preview-react/divider/examples/Basic.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import {Divider} from '@workday/canvas-kit-preview-react/divider';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+
+const sectionStyles = createStyles({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: system.space.x4,
+  maxWidth: '40rem',
+});
+
+export default () => {
+  const lastIndex = maintainerList.length - 1;
+  return (
+    <section className={sectionStyles}>
+      {maintainerList.map((maintainerData, index) => (
+        <>
+          <ProfileCard {...maintainerData} />
+          {index !== lastIndex && <Divider space={system.space.x1} />}
+        </>
+      ))}
+    </section>
+  );
+};
+
+const maintainerList = [
+  {
+    id: '44883293',
+    name: 'Josh Bagwell',
+    bio: 'Software Development Engineer',
+  },
+  {
+    id: '338257',
+    name: 'Nicholas Boll',
+    bio: 'Principal Software Development Engineer',
+  },
+  {
+    id: '7966550',
+    name: 'Manuel Carrera',
+    bio: 'Sr. Software Development Engineer',
+  },
+  {
+    id: '146020',
+    name: 'James Fan',
+    bio: 'Sr. Software Development Engineer',
+  },
+  {
+    id: '48605821',
+    name: 'Raisa Primerova',
+    bio: 'Software Development Engineer',
+  },
+  {
+    id: '4818182',
+    name: 'Alan Smith',
+    bio: 'Principal Software Development Engineer',
+  },
+];
+
+const profileCardStyles = createStyles({
+  display: 'grid',
+  gridGap: '0.5rem',
+  gridTemplateColumns: '5rem 1fr',
+  gridTemplateRows: '1fr 1fr',
+});
+
+const profileCardAvatarStyles = createStyles({
+  gridColumn: '1',
+  gridRow: '1 / 3',
+});
+
+const profileCardHeadingStyles = createStyles({
+  ...system.type.body.large,
+  fontWeight: system.fontWeight.bold,
+  gridColumn: '2/3',
+  gridRow: '1',
+  margin: 0,
+});
+
+const profileCardBodyStyles = createStyles({
+  ...system.type.body.small,
+  gridColumn: '2',
+  gridRow: '2',
+  margin: 0,
+});
+
+interface ProfileCardProps {
+  id: string;
+  name: string;
+  bio: string;
+}
+
+const ProfileCard = ({id, name, bio}: ProfileCardProps) => (
+  <div className={profileCardStyles}>
+    <Avatar
+      size="extraLarge"
+      url={`https://avatars.githubusercontent.com/u/${id}?v=4`}
+      altText={`${name}'s avatar`}
+      className={profileCardAvatarStyles}
+    />
+    <h3 className={profileCardHeadingStyles}>{name}</h3>
+    <p className={profileCardBodyStyles}>{bio}</p>
+  </div>
+);

package/dist/mdx/preview-react/divider/examples/CustomSpace.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import {Divider} from '@workday/canvas-kit-preview-react/divider';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const headingStyles = createStyles({
+  ...system.type.body.large,
+  fontWeight: system.fontWeight.bold,
+  margin: 0,
+});
+
+const bodyStyles = createStyles({
+  ...system.type.body.small,
+  margin: 0,
+});
+
+const customDividerSpace = createStyles({
+  margin: `0 0 ${system.space.x4}`,
+});
+
+export default () => {
+  return (
+    <section>
+      <h3 className={headingStyles}>Quote of the Day</h3>
+      <Divider cs={customDividerSpace} />
+      <p className={bodyStyles}>
+        "It is not our differences that divide us. It is our inability to recognize, accept, and
+        celebrate those differences." – Audre Lorde
+      </p>
+    </section>
+  );
+};

package/dist/mdx/preview-react/loading-sparkles/LoadingSparkles.mdx

@@ -1,6 +1,5 @@
-import {SymbolDoc} from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 import {LoadingSparkles} from '@workday/canvas-kit-preview-react/loading-sparkles';
-
 import Basic from './examples/Basic';
 import RTL from './examples/RTL';
 

package/dist/mdx/preview-react/menu/Menu.mdx

@@ -1,7 +1,4 @@
-import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
-import {DeprecatedMenu, DeprecatedMenuItem} from '@workday/canvas-kit-preview-react/menu';
-import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
-
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 import ContextMenu from './examples/ContextMenu';
 import CustomMenuItem from './examples/CustomMenuItem';
@@ -104,8 +101,4 @@ your new items screen reader friendly add an `aria-label` around each grouped it
 
 ### DeprecatedMenuItem
 
-<SymbolDoc name="DeprecatedMenuItem" fileName="/preview-react/" />
-
-## Specifications
-
-<Specifications file="MenuPreview.spec.ts" name="Menu" />
+<SymbolDoc name="DeprecatedMenuItem" fileName="/preview-react/" />

package/dist/mdx/preview-react/pill/Pill.mdx

@@ -1,6 +1,4 @@
-import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
-
-import {Pill} from '@workday/canvas-kit-preview-react/pill';
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 
 import WithReadOnly from './examples/WithReadOnly';
 import WithAvatar from './examples/WithAvatar';

package/dist/mdx/preview-react/radio/Radio.mdx

@@ -1,6 +1,4 @@
-import {Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
-
-import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 
 import Basic from './examples/Basic';
 import Alert from './examples/Alert';

package/dist/mdx/preview-react/radio/examples/Alert.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormFieldGroup} from '@workday/canvas-kit-react/form-field';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 
 export default () => {
@@ -13,15 +13,30 @@ export default () => {
   };
 
   return (
-    <FormField error="alert" id="hint-alert" as="fieldset">
-      <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
-      <FormField.Input as={RadioGroup} name="crust-alert" onChange={handleChange} value={value}>
-        <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>
-        <RadioGroup.RadioButton value="thin">Thin</RadioGroup.RadioButton>
-        <RadioGroup.RadioButton value="gluten-free">Gluten free</RadioGroup.RadioButton>
-        <RadioGroup.RadioButton value="cauliflower">Cauliflower</RadioGroup.RadioButton>
-      </FormField.Input>
-      <FormField.Hint>Deep dish is an extra $2.99.</FormField.Hint>
-    </FormField>
+    <FormFieldGroup error="alert" id="hint-alert">
+      <FormFieldGroup.Label>Choose Your Pizza Crust</FormFieldGroup.Label>
+      <FormFieldGroup.Field>
+        <FormFieldGroup.List
+          as={RadioGroup}
+          name="crust-alert"
+          onChange={handleChange}
+          value={value}
+        >
+          <FormFieldGroup.Input as={RadioGroup.RadioButton} value="deep-dish">
+            Deep dish
+          </FormFieldGroup.Input>
+          <FormFieldGroup.Input as={RadioGroup.RadioButton} value="thin">
+            Thin
+          </FormFieldGroup.Input>
+          <FormFieldGroup.Input as={RadioGroup.RadioButton} value="gluten-free">
+            Gluten free
+          </FormFieldGroup.Input>
+          <FormFieldGroup.Input as={RadioGroup.RadioButton} value="cauliflower">
+            Cauliflower
+          </FormFieldGroup.Input>
+        </FormFieldGroup.List>
+        <FormFieldGroup.Hint>Deep dish is an extra $2.99.</FormFieldGroup.Hint>
+      </FormFieldGroup.Field>
+    </FormFieldGroup>
   );
 };

package/dist/mdx/preview-react/radio/examples/Basic.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormFieldGroup} from '@workday/canvas-kit-react/form-field';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
@@ -20,24 +20,34 @@ export default () => {
 
   return (
     <Flex flexDirection="column">
-      <FormField as="fieldset">
-        <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
-        <FormField.Input
-          cs={formfieldInputStyles}
-          as={RadioGroup}
-          name="pizza-crust"
-          onChange={handleChange}
-          value={value}
-        >
-          <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>
-          <RadioGroup.RadioButton value="thin">Thin</RadioGroup.RadioButton>
-          <RadioGroup.RadioButton value="gluten-free">Gluten free</RadioGroup.RadioButton>
-          <RadioGroup.RadioButton value="cauliflower">Cauliflower</RadioGroup.RadioButton>
-          <RadioGroup.RadioButton value="custom">
-            Butter - the best thing to put on bread
-          </RadioGroup.RadioButton>
-        </FormField.Input>
-      </FormField>
+      <FormFieldGroup>
+        <FormFieldGroup.Label>Choose Your Pizza Crust</FormFieldGroup.Label>
+        <FormFieldGroup.Field>
+          <FormFieldGroup.List
+            cs={formfieldInputStyles}
+            as={RadioGroup}
+            name="pizza-crust"
+            onChange={handleChange}
+            value={value}
+          >
+            <FormFieldGroup.Input as={RadioGroup.RadioButton} value="deep-dish">
+              Deep dish
+            </FormFieldGroup.Input>
+            <FormFieldGroup.Input as={RadioGroup.RadioButton} value="thin">
+              Thin
+            </FormFieldGroup.Input>
+            <FormFieldGroup.Input as={RadioGroup.RadioButton} value="gluten-free">
+              Gluten free
+            </FormFieldGroup.Input>
+            <FormFieldGroup.Input as={RadioGroup.RadioButton} value="cauliflower">
+              Cauliflower
+            </FormFieldGroup.Input>
+            <FormFieldGroup.Input as={RadioGroup.RadioButton} value="custom">
+              Butter - the best thing to put on bread
+            </FormFieldGroup.Input>
+          </FormFieldGroup.List>
+        </FormFieldGroup.Field>
+      </FormFieldGroup>
       Value selected: {value}
     </Flex>
   );

package/dist/mdx/preview-react/radio/examples/Custom.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormFieldGroup} from '@workday/canvas-kit-react/form-field';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
@@ -26,35 +26,37 @@ export default () => {
 
   return (
     <Flex flexDirection="column">
-      <FormField as="fieldset">
-        <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
-        <FormField.Input
-          as={RadioGroup}
-          name="pizza-crust-custom"
-          onChange={handleChange}
-          cs={styleOverrides.formfieldInputStyles}
-          value={value}
-        >
-          <RadioGroup.Label>
-            <RadioGroup.Label.Input value="deep-dish" />
-            <RadioGroup.Label.Text cs={styleOverrides.radioGroupLabelTextStyles}>
-              Deep dish
-            </RadioGroup.Label.Text>
-          </RadioGroup.Label>
-          <RadioGroup.Label>
-            <RadioGroup.Label.Input value="gluten-free" />
-            <RadioGroup.Label.Text cs={styleOverrides.radioGroupLabelTextStyles}>
-              Gluten free
-            </RadioGroup.Label.Text>
-          </RadioGroup.Label>
-          <RadioGroup.Label>
-            <RadioGroup.Label.Input value="cauliflower" />
-            <RadioGroup.Label.Text cs={styleOverrides.radioGroupLabelTextStyles}>
-              Cauliflower
-            </RadioGroup.Label.Text>
-          </RadioGroup.Label>
-        </FormField.Input>
-      </FormField>
+      <FormFieldGroup>
+        <FormFieldGroup.Label>Choose Your Pizza Crust</FormFieldGroup.Label>
+        <FormFieldGroup.Field>
+          <FormFieldGroup.List
+            as={RadioGroup}
+            name="pizza-crust-custom"
+            onChange={handleChange}
+            cs={styleOverrides.formfieldInputStyles}
+            value={value}
+          >
+            <RadioGroup.Label>
+              <FormFieldGroup.Input as={RadioGroup.Label.Input} value="deep-dish" />
+              <RadioGroup.Label.Text cs={styleOverrides.radioGroupLabelTextStyles}>
+                Deep dish
+              </RadioGroup.Label.Text>
+            </RadioGroup.Label>
+            <RadioGroup.Label>
+              <FormFieldGroup.Input as={RadioGroup.Label.Input} value="gluten-free" />
+              <RadioGroup.Label.Text cs={styleOverrides.radioGroupLabelTextStyles}>
+                Gluten free
+              </RadioGroup.Label.Text>
+            </RadioGroup.Label>
+            <RadioGroup.Label>
+              <FormFieldGroup.Input as={RadioGroup.Label.Input} value="cauliflower" />
+              <RadioGroup.Label.Text cs={styleOverrides.radioGroupLabelTextStyles}>
+                Cauliflower
+              </RadioGroup.Label.Text>
+            </RadioGroup.Label>
+          </FormFieldGroup.List>
+        </FormFieldGroup.Field>
+      </FormFieldGroup>
       Value selected: {value}
     </Flex>
   );