@workday/canvas-kit-docs 11.0.0-alpha.662-next.0 → 11.0.0-alpha.664-next.0

package/dist/mdx/react/color-picker/color-input/ColorInput.mdx

@@ -1,6 +1,7 @@
 import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
 
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
+import {InformationHighlight} from '@workday/canvas-kit-docs';
 
 import Alert from './examples/Alert';
 import Basic from './examples/Basic';
@@ -28,6 +29,18 @@ yarn add @workday/canvas-kit-react
 
 ## Usage
 
+<InformationHighlight style={{margin: '1.5rem 0'}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Heading>Note</InformationHighlight.Heading>
+  <InformationHighlight.Body>
+    These examples are using FormField from Preview. We can plan to promote this component to the
+    Main package in a future major version.
+  </InformationHighlight.Body>
+  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-form-field--basic">
+    View Form Field (Preview) Documentation
+  </InformationHighlight.Link>
+</InformationHighlight>
+
 ### Basic Example
 
 Color Input should be used in tandem with [Form Field](/components/inputs/form-field/) to meet
@@ -73,13 +86,10 @@ the width of its container.
 
 The `grow` prop may also be applied directly to the Color Input if Form Field is not being used.
 
-### Label Position
-
-Set the `labelPosition` prop of the wrapping Form Field to designate the position of the label
-relative to the Color Input. `labelPosition` accepts the following values:
+### Label Position Horizontal
 
-- `FormField.LabelPosition.Top` (Default)
-- `FormField.LabelPosition.Left`
+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`.
 
 <ExampleCodeBlock code={LabelPosition} />
 

package/dist/mdx/react/color-picker/color-input/examples/Alert.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
 
 export default () => {
@@ -10,13 +10,10 @@ export default () => {
   };
 
   return (
-    <FormField
-      error={FormField.ErrorType.Alert}
-      hintId="hint-alert"
-      hintText="Please select a background color."
-      label="Background Color"
-    >
-      <ColorInput onChange={handleChange} value={value} />
+    <FormField error="alert">
+      <FormField.Label>Background Color</FormField.Label>
+      <FormField.Input as={ColorInput} onChange={handleChange} value={value} />
+      <FormField.Hint>Please select a background color.</FormField.Hint>
     </FormField>
   );
 };

package/dist/mdx/react/color-picker/color-input/examples/Basic.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
 
 export default () => {
@@ -10,8 +10,9 @@ export default () => {
   };
 
   return (
-    <FormField label="Background Color">
-      <ColorInput onChange={handleChange} value={value} />
+    <FormField>
+      <FormField.Label>Background Color</FormField.Label>
+      <FormField.Input as={ColorInput} onChange={handleChange} value={value} />
     </FormField>
   );
 };

package/dist/mdx/react/color-picker/color-input/examples/Checked.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
 
 export default () => {
@@ -10,8 +10,9 @@ export default () => {
   };
 
   return (
-    <FormField label="Background Color">
-      <ColorInput onChange={handleChange} showCheck={true} value={value} />
+    <FormField>
+      <FormField.Label>Background Color</FormField.Label>
+      <FormField.Input as={ColorInput} onChange={handleChange} showCheck={true} value={value} />
     </FormField>
   );
 };

package/dist/mdx/react/color-picker/color-input/examples/Disabled.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
 
 export default () => {
@@ -10,8 +10,9 @@ export default () => {
   };
 
   return (
-    <FormField label="Background Color">
-      <ColorInput disabled onChange={handleChange} value={value} />
+    <FormField>
+      <FormField.Label>Background Color</FormField.Label>
+      <FormField.Input as={ColorInput} disabled onChange={handleChange} value={value} />
     </FormField>
   );
 };

package/dist/mdx/react/color-picker/color-input/examples/Error.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
 
 export default () => {
@@ -10,13 +10,10 @@ export default () => {
   };
 
   return (
-    <FormField
-      error={FormField.ErrorType.Error}
-      hintId="hint-error"
-      hintText="Please select a background color."
-      label="Background Color"
-    >
-      <ColorInput onChange={handleChange} value={value} />
+    <FormField error="error">
+      <FormField.Label>Background Color</FormField.Label>
+      <FormField.Input as={ColorInput} onChange={handleChange} value={value} />
+      <FormField.Hint>Please select a background color.</FormField.Hint>
     </FormField>
   );
 };

package/dist/mdx/react/color-picker/color-input/examples/Grow.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
 
 export default () => {
@@ -10,8 +10,9 @@ export default () => {
   };
 
   return (
-    <FormField grow={true} label="Background Color">
-      <ColorInput onChange={handleChange} value={value} />
+    <FormField cs={{width: '100%'}}>
+      <FormField.Label>Background Color</FormField.Label>
+      <FormField.Input cs={{width: '100%'}} as={ColorInput} onChange={handleChange} value={value} />
     </FormField>
   );
 };

package/dist/mdx/react/color-picker/color-input/examples/LabelPosition.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
 
 export default () => {
@@ -10,8 +10,9 @@ export default () => {
   };
 
   return (
-    <FormField label="Background Color" labelPosition={FormField.LabelPosition.Left}>
-      <ColorInput onChange={handleChange} value={value} />
+    <FormField orientation="horizontal">
+      <FormField.Label>Background Color</FormField.Label>
+      <FormField.Input as={ColorInput} onChange={handleChange} value={value} />
     </FormField>
   );
 };

package/dist/mdx/react/color-picker/color-input/examples/RefForwarding.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
 
 export default () => {
@@ -17,8 +17,9 @@ export default () => {
 
   return (
     <>
-      <FormField label="Background Color">
-        <ColorInput onChange={handleChange} ref={ref} value={value} />
+      <FormField>
+        <FormField.Label>Background Color</FormField.Label>
+        <FormField.Input as={ColorInput} onChange={handleChange} ref={ref} value={value} />
       </FormField>
       <PrimaryButton onClick={handleClick}>Focus Color Input</PrimaryButton>
     </>

package/dist/mdx/react/color-picker/color-input/examples/Required.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
 
 export default () => {
@@ -10,8 +10,9 @@ export default () => {
   };
 
   return (
-    <FormField label="Background Color" required={true}>
-      <ColorInput onChange={handleChange} value={value} />
+    <FormField isRequired={true}>
+      <FormField.Label>Background Color</FormField.Label>
+      <FormField.Input as={ColorInput} onChange={handleChange} value={value} />
     </FormField>
   );
 };

package/dist/mdx/react/color-picker/color-input/examples/ValidColorChange.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
 import {type} from '@workday/canvas-kit-react/tokens';
 
@@ -17,8 +17,10 @@ export default () => {
 
   return (
     <>
-      <FormField label="Background Color">
-        <ColorInput
+      <FormField>
+        <FormField.Label>Background Color</FormField.Label>
+        <FormField.Input
+          as={ColorInput}
           onChange={handleChange}
           onValidColorChange={handleValidColorChange}
           value={value}

package/dist/mdx/react/color-picker/color-preview/ColorPreview.mdx

@@ -1,6 +1,7 @@
 import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
 
 import {ColorPreview} from '@workday/canvas-kit-react/color-picker';
+import {InformationHighlight} from '@workday/canvas-kit-docs';
 
 import Basic from './examples/Basic';
 import LabelPosition from './examples/LabelPosition';
@@ -21,6 +22,18 @@ yarn add @workday/canvas-kit-react
 
 ## Usage
 
+<InformationHighlight style={{margin: '1.5rem 0'}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Heading>Note</InformationHighlight.Heading>
+  <InformationHighlight.Body>
+    These examples are using FormField from Preview. We can plan to promote this component to the
+    Main package in a future major version.
+  </InformationHighlight.Body>
+  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-form-field--basic">
+    View Form Field (Preview) Documentation
+  </InformationHighlight.Link>
+</InformationHighlight>
+
 ### Basic Example
 
 <ExampleCodeBlock code={Basic} />
@@ -32,13 +45,10 @@ forward `ref` to its underlying `<input type="text">` element.
 
 <ExampleCodeBlock code={RefForwarding} />
 
-### Label Position
-
-If Form Field is being used, set its `labelPosition` prop to designate the position of the label
-relative to the Color Preview. `labelPosition` accepts the following values:
+### Label Position Horizontal
 
-- `FormField.LabelPosition.Top` (Default)
-- `FormField.LabelPosition.Left`
+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`.
 
 <ExampleCodeBlock code={LabelPosition} />
 

package/dist/mdx/react/color-picker/color-preview/examples/LabelPosition.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {ColorPreview} from '@workday/canvas-kit-react/color-picker';
 
 export default () => {
   return (
-    <FormField label="Background Color" labelPosition={FormField.LabelPosition.Left}>
-      <ColorPreview value="#00ffcc" />
+    <FormField orientation="horizontal">
+      <FormField.Label>Background Color</FormField.Label>
+      <FormField.Input as={ColorPreview} value="#00ffcc" />
     </FormField>
   );
 };

package/dist/mdx/react/color-picker/color-preview/examples/RefForwarding.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {ColorPreview} from '@workday/canvas-kit-react/color-picker';
 import {type} from '@workday/canvas-kit-react/tokens';
 
@@ -14,8 +14,9 @@ export default () => {
 
   return (
     <>
-      <FormField label="Background Color">
-        <ColorPreview ref={ref} value="#00ffcc" />
+      <FormField>
+        <FormField.Label>Background Color</FormField.Label>
+        <FormField.Input as={ColorPreview} ref={ref} value="#00ffcc" />
       </FormField>
       <p style={type.levels.subtext.large}>Width of Color Preview: {width}</p>
       <PrimaryButton onClick={handleClick}>Calculate Width of Color Preview</PrimaryButton>

package/dist/mdx/react/common/examples/ResponsiveStyles.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {Box, Grid, Flex} from '@workday/canvas-kit-react/layout';
 import {Text} from '@workday/canvas-kit-react/text';
 import {useResponsiveContainerStyles, useResizeObserver} from '@workday/canvas-kit-react/common';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 
 const HeadingText = ({children, ...props}) => (
@@ -84,9 +84,10 @@ export default () => {
 
   return (
     <Box ref={ref} width={contWidth}>
-      <FormField label={'Container Size'}>
+      <FormField>
+        <FormField.Label>Container Size</FormField.Label>
         <Select items={['1024px', '768px', '320px']} initialSelectedIds={['1024px']}>
-          <Select.Input onChange={handleChange} />
+          <FormField.Input as={Select.Input} onChange={handleChange} />
           <Select.Popper>
             <Select.Card>
               <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {Dialog} from '@workday/canvas-kit-react/dialog';
@@ -23,8 +23,9 @@ export default () => {
           <Dialog.CloseIcon aria-label="Close" />
           <Dialog.Heading paddingTop="m">Sign Up for 15% Off Your Next Order</Dialog.Heading>
           <Dialog.Body>
-            <FormField label="Email">
-              <TextInput onChange={handleChange} value={value} />
+            <FormField>
+              <FormField.Label>Email</FormField.Label>
+              <FormField.Input as={TextInput} onChange={handleChange} value={value} />
             </FormField>
           </Dialog.Body>
           <Flex gap="s" padding="xxs" marginTop="xxs">

package/dist/mdx/react/dialog/examples/Focus.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {Dialog} from '@workday/canvas-kit-react/dialog';
@@ -25,8 +25,9 @@ export default () => {
             <Dialog.CloseIcon aria-label="Close" />
             <Dialog.Heading paddingTop="m">Sign Up for 15% Off Your Next Order</Dialog.Heading>
             <Dialog.Body>
-              <FormField label="Email">
-                <TextInput onChange={handleChange} value={value} />
+              <FormField>
+                <FormField.Label>Email</FormField.Label>
+                <FormField.Input as={TextInput} onChange={handleChange} value={value} />
               </FormField>
             </Dialog.Body>
             <Flex gap="s" padding="xxs" marginTop="xxs">

package/dist/mdx/react/form-field/FormField.mdx

@@ -13,10 +13,19 @@ import Grow from './examples/Grow.tsx';
 import Hint from './examples/Hint.tsx';
 import LabelPosition from './examples/LabelPosition.tsx';
 import Required from './examples/Required.tsx';
+import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 
 
 # Canvas Kit Form Field
 
+<StatusIndicator variant="red">
+  <StatusIndicator.Label>Deprecated</StatusIndicator.Label>
+</StatusIndicator>
+
+`FormField` in Main has been deprecated and will be removed in a future major version. Please use
+[`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic)
+instead.
+
 Form Field allows users to wrap input components to make them accessible and adds complementary
 labels and error messages.
 

package/dist/mdx/react/modal/examples/CustomFocus.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {Flex, Box} from '@workday/canvas-kit-react/layout';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
@@ -29,8 +29,14 @@ export default () => {
             <Box as="p" id={longDescID} marginTop={0} marginBottom="m">
               Enter your initials to acknowledge the license.
             </Box>
-            <FormField label="Initials" style={{marginBottom: 0}}>
-              <TextInput ref={ref} value={value} onChange={e => setValue(e.currentTarget.value)} />
+            <FormField cs={{marginBottom: 0}}>
+              <FormField.Label>Initials</FormField.Label>
+              <FormField.Input
+                as={TextInput}
+                ref={ref}
+                value={value}
+                onChange={e => setValue(e.currentTarget.value)}
+              />
             </FormField>
           </Modal.Body>
           <Flex gap="s" padding="xxs" marginTop="xxs">

package/dist/mdx/react/modal/examples/FormModal.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {plusIcon} from '@workday/canvas-system-icons-web';
 
@@ -32,11 +32,13 @@ export default () => {
           <Modal.CloseIcon aria-label="Close" />
           <Modal.Heading>New User</Modal.Heading>
           <Modal.Body>
-            <FormField label="First Name">
-              <TextInput name="first" />
+            <FormField>
+              <FormField.Label>First Name</FormField.Label>
+              <FormField.Input as={TextInput} name="first" />
             </FormField>
-            <FormField label="Last Name">
-              <TextInput name="last" />
+            <FormField>
+              <FormField.Label>Last Name</FormField.Label>
+              <FormField.Input as={TextInput} name="last" />
             </FormField>
           </Modal.Body>
           <Flex gap="s" padding="xxs" marginTop="xxs">

package/dist/mdx/react/modal/examples/ReturnFocus.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {DeleteButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Flex, Box} from '@workday/canvas-kit-react/layout';
 import {Select} from '@workday/canvas-kit-preview-react/select';
 
@@ -18,8 +18,10 @@ export default () => {
 
   return (
     <Modal model={model}>
-      <FormField label="Choose an option">
-        <Select
+      <FormField>
+        <FormField.Label>Choose an option</FormField.Label>
+        <FormField.Input
+          as={Select}
           ref={ref}
           options={['', 'Delete', 'Two']}
           value={value}
@@ -32,7 +34,7 @@ export default () => {
               setValue(e.currentTarget.value);
             }
           }}
-        ></Select>
+        />
       </FormField>
       <Modal.Overlay>
         <Modal.Card>

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

@@ -1,4 +1,4 @@
-import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+import {SymbolDoc, Specifications, InformationHighlight} from '@workday/canvas-kit-docs';
 
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 
@@ -27,6 +27,18 @@ yarn add @workday/canvas-kit-react
 
 ## Usage
 
+<InformationHighlight style={{margin: '1.5rem 0'}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Heading>Note</InformationHighlight.Heading>
+  <InformationHighlight.Body>
+    These examples are using FormField from Preview. We can plan to promote this component to the
+    Main package in a future major version.
+  </InformationHighlight.Body>
+  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-form-field--basic">
+    View Form Field (Preview) Documentation
+  </InformationHighlight.Link>
+</InformationHighlight>
+
 ### Basic Example
 
 Radio Buttons are intended to be grouped together using a Radio Group.
@@ -38,7 +50,9 @@ Radio Group should be used in tandem with [Form Field](/components/inputs/form-f
 
 ### Disabled
 
-Set the `disabled` prop of the Radio Button to prevent users from interacting with it. Be careful not to disable a pre-selected Radio Button, this will block keyboard access from the entire Radio Group. 
+Set the `disabled` prop of the Radio Button to prevent users from interacting with it. Be careful
+not to disable a pre-selected Radio Button, this will block keyboard access from the entire Radio
+Group.
 
 <ExampleCodeBlock code={Disabled} />
 
@@ -62,13 +76,10 @@ forward `ref` to its underlying `<input type="radio">` element.
 
 <ExampleCodeBlock code={RefForwarding} />
 
-### Label Position
-
-Set the `labelPosition` prop of the wrapping Form Field to designate the position of the label
-relative to the Radio Group. `labelPosition` accepts the following values:
+### Label Position Horizontal
 
-- `FormField.LabelPosition.Top` (Default)
-- `FormField.LabelPosition.Left`
+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`.
 
 <ExampleCodeBlock code={LabelPosition} />
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
 
@@ -11,19 +11,15 @@ export default () => {
   };
 
   return (
-    <FormField
-      error={FormField.ErrorType.Alert}
-      hintId="hint-alert"
-      hintText="Deep dish is an extra $2.99"
-      label="Choose Your Pizza Crust"
-      useFieldset={true}
-    >
-      <RadioGroup name={useUniqueId()} onChange={handleChange} value={value}>
+    <FormField error="alert" as="fieldset">
+      <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
+      <FormField.Input as={RadioGroup} name={useUniqueId()} onChange={handleChange} value={value}>
         <Radio label="Deep dish" value="deep-dish" />
         <Radio label="Thin" value="thin" />
         <Radio label="Gluten free" value="gluten-free" />
         <Radio label="Cauliflower" value="cauliflower" />
-      </RadioGroup>
+      </FormField.Input>
+      <FormField.Hint>Deep dish is an extra $2.99</FormField.Hint>
     </FormField>
   );
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
 import {space} from '@workday/canvas-kit-react/tokens';
@@ -12,14 +12,15 @@ export default () => {
   };
 
   return (
-    <FormField label="Choose Your Pizza Crust" useFieldset={true} style={{width: space.xl}}>
-      <RadioGroup name={useUniqueId()} onChange={handleChange} value={value}>
+    <FormField as="fieldset" cs={{width: space.xl}}>
+      <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
+      <FormField.Input as={RadioGroup} name={useUniqueId()} onChange={handleChange} value={value}>
         <Radio label="Deep dish" value="deep-dish" />
         <Radio label="Thin" value="thin" />
         <Radio label="Gluten free" value="gluten-free" />
         <Radio label="Cauliflower" value="cauliflower" />
         <Radio label="Butter - the best thing to put on bread" value="butter" />
-      </RadioGroup>
+      </FormField.Input>
     </FormField>
   );
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
 
@@ -11,13 +11,14 @@ export default () => {
   };
 
   return (
-    <FormField label="Choose Your Pizza Crust" useFieldset={true}>
-      <RadioGroup name={useUniqueId()} onChange={handleChange} value={value}>
+    <FormField as="fieldset">
+      <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
+      <FormField.Input as={RadioGroup} name={useUniqueId()} onChange={handleChange} value={value}>
         <Radio label="Deep dish" value="deep-dish" />
         <Radio label="Thin" value="thin" />
         <Radio disabled={true} label="Gluten free (sold out)" value="gluten-free" />
         <Radio label="Cauliflower" value="cauliflower" />
-      </RadioGroup>
+      </FormField.Input>
     </FormField>
   );
 };