Added name attribute to feature flag checkboxes

no issue

- added `name` prop to `<Toggle>` component that corresponds to the checkbox's `name` attribute
- updated `<FeatureToggle>` to set the `name` prop on it's `<Toggle>` component to the feature flag that was passed in so all feature toggles get a useful name attribute without having to manually specify one

apps/admin-x-design-system/src/global/form/Toggle.tsx

@@ -9,6 +9,7 @@ export type ToggleDirections = 'ltr' | 'rtl';
 export interface ToggleProps {
     checked?: boolean;
     disabled?: boolean;
+    name?: string;
     error?: boolean;
     size?: ToggleSizes;
     label?: React.ReactNode;
@@ -33,6 +34,7 @@ const Toggle: React.FC<ToggleProps> = ({
     error,
     checked,
     disabled,
+    name,
     onChange
 }) => {
     const id = useId();
@@ -95,6 +97,7 @@ const Toggle: React.FC<ToggleProps> = ({
                     )}
                     disabled={disabled}
                     id={id}
+                    name={name}
                     role="switch"
                     type="checkbox"
                     onChange={onChange} />

apps/admin-x-settings/src/components/settings/advanced/labs/FeatureToggle.tsx

@@ -13,7 +13,7 @@ const FeatureToggle: React.FC<{ flag: string; label?: string; }> = ({label, flag
     const client = useQueryClient();
     const handleError = useHandleError();
 
-    return <Toggle checked={labs[flag]} label={label} labelClasses='sr-only' onChange={async () => {
+    return <Toggle checked={labs[flag]} label={label} labelClasses='sr-only' name={`feature-${flag}`} onChange={async () => {
         const newValue = !labs[flag];
         try {
             await editSettings([{