@vectara/vectara-ui 18.2.2 → 18.3.0

package/lib/components/drawer/Drawer.js

@@ -71,7 +71,13 @@ export const VuiDrawer = (_a) => {
     const classes = classNames("vuiDrawer", `vuiDrawer--${color}`, className, {
         "vuiDrawer-isLoaded": showTransition
     });
-    return (_jsx(VuiPortal, { children: (isOpen || isContentVisible || showTransition) && (_jsx(VuiScreenBlock, Object.assign({ isHidden: !isOpen }, { children: _jsx(FocusOn, Object.assign({ onEscapeKey: onCloseDelayed, onClickOutside: handleClickOutside, 
+    return (_jsx(VuiPortal, { children: (isOpen || isContentVisible || showTransition) && (_jsx(VuiScreenBlock, Object.assign({ isHidden: !isOpen }, { children: _jsx(FocusOn
+            // Disable the focus guard as soon as the drawer begins closing
+            // so it doesn't intercept clicks while transitioning out.
+            , Object.assign({ 
+                // Disable the focus guard as soon as the drawer begins closing
+                // so it doesn't intercept clicks while transitioning out.
+                enabled: isOpen, onEscapeKey: onCloseDelayed, onClickOutside: handleClickOutside, 
                 // Enable manual focus return to work.
                 returnFocus: false, 
                 // Enable focus on contents when it's open,

package/lib/components/drawer/_index.scss

@@ -16,6 +16,7 @@ $drawerWidth: 680px;
   z-index: $drawerZIndex;
   right: -$drawerWidth;
   transition: right $transitionSpeed cubic-bezier(0, 1, 0, 1);
+  pointer-events: none;
 
   @media screen and (max-width: ($drawerWidth + $sizeM)) {
     max-width: calc(100% - $sizeM);
@@ -24,6 +25,7 @@ $drawerWidth: 680px;
 
 .vuiDrawer-isLoaded {
   right: 0;
+  pointer-events: auto;
 }
 
 .vuiDrawerHeader {

package/lib/components/formGroup/BlockFormGroup.d.ts

@@ -0,0 +1,2 @@
+import { FormGroupProps } from "./types";
+export declare const VuiBlockFormGroup: ({ label, labelRightContent, labelFor, labelSize, isRequired, helpText, ariaDescribedByLabel, errorMessages, content }: FormGroupProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/formGroup/BlockFormGroup.js

@@ -0,0 +1,9 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { VuiLabel } from "../form/label/Label";
+import { VuiSpacer } from "../spacer/Spacer";
+import { VuiText } from "../typography/Text";
+import { VuiTextColor } from "../typography/TextColor";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+export const VuiBlockFormGroup = ({ label, labelRightContent, labelFor, labelSize, isRequired, helpText, ariaDescribedByLabel, errorMessages, content }) => {
+    return (_jsxs("div", { children: [(label || labelRightContent) && (_jsxs(_Fragment, { children: [_jsxs(VuiFlexContainer, Object.assign({ justifyContent: "spaceBetween", alignItems: "center", spacing: "s" }, { children: [label ? (_jsxs(VuiLabel, Object.assign({ labelFor: labelFor, size: labelSize }, { children: [label, isRequired && " (required)"] }))) : (_jsx("span", {})), labelRightContent] })), _jsx(VuiSpacer, { size: labelSize === "s" ? "xs" : "xxs" })] })), helpText && (_jsxs(_Fragment, { children: [_jsx(VuiText, Object.assign({ size: "xs", id: ariaDescribedByLabel }, { children: _jsx("p", { children: _jsx(VuiTextColor, Object.assign({ color: "subdued" }, { children: helpText })) }) })), _jsx(VuiSpacer, { size: "xs" })] })), errorMessages && (_jsxs(_Fragment, { children: [errorMessages, _jsx(VuiSpacer, { size: "xs" })] })), content] }));
+};

package/lib/components/formGroup/FormGroup.d.ts

@@ -7,6 +7,7 @@ type Props = {
     helpText?: React.ReactNode;
     errors?: string[];
     isRequired?: boolean;
+    inline?: boolean;
 };
-export declare const VuiFormGroup: ({ children, labelFor, helpText, label, labelSize, labelRightContent, errors, isRequired }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiFormGroup: ({ children, labelFor, helpText, label, labelSize, labelRightContent, errors, isRequired, inline }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/formGroup/FormGroup.js

@@ -1,6 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement } from "react";
-import { VuiLabel } from "../form/label/Label";
 import { VuiSpacer } from "../spacer/Spacer";
 import { VuiText } from "../typography/Text";
 import { VuiTextColor } from "../typography/TextColor";
@@ -9,9 +8,10 @@ import { VuiTextInput } from "../form/input/TextInput";
 import { VuiNumberInput } from "../form/input/NumberInput";
 import { VuiTextArea } from "../form/textArea/TextArea";
 import { VuiSelect } from "../form/select/Select";
-import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiInlineFormGroup } from "./InlineFormGroup";
+import { VuiBlockFormGroup } from "./BlockFormGroup";
 const VALIDATION_ALLOWLIST = [VuiTextInput, VuiNumberInput, VuiTextArea, VuiSelect];
-export const VuiFormGroup = ({ children, labelFor, helpText, label, labelSize = "s", labelRightContent, errors, isRequired }) => {
+export const VuiFormGroup = ({ children, labelFor, helpText, label, labelSize = "s", labelRightContent, errors, isRequired, inline }) => {
     const ariaProps = {
         "aria-describedby": ""
     };
@@ -20,7 +20,7 @@ export const VuiFormGroup = ({ children, labelFor, helpText, label, labelSize =
     const errorMessages = errors === null || errors === void 0 ? void 0 : errors.map((error, index) => {
         const id = `error-${createId()}`;
         errorMessageIds.push(id);
-        return (_jsxs("div", { children: [index > 0 && _jsx(VuiSpacer, { size: "xs" }), _jsx(VuiText, Object.assign({ size: "xs", id: id }, { children: _jsx("p", { children: _jsx(VuiTextColor, Object.assign({ color: "danger" }, { children: error })) }) }), error)] }, error));
+        return (_jsxs("div", { children: [index > 0 && _jsx(VuiSpacer, { size: "xs" }), _jsx(VuiText, Object.assign({ size: "xs", id: id }, { children: _jsx("p", { children: _jsx(VuiTextColor, Object.assign({ color: inline ? "empty" : "danger" }, { children: error })) }) }), error)] }, error));
     });
     if (helpText) {
         ariaProps["aria-describedby"] += ariaDescribedByLabel;
@@ -34,5 +34,19 @@ export const VuiFormGroup = ({ children, labelFor, helpText, label, labelSize =
         cloneProps.isInvalid = errors && errors.length > 0;
     }
     const content = cloneElement(children, cloneProps);
-    return (_jsxs("div", { children: [(label || labelRightContent) && (_jsxs(_Fragment, { children: [_jsxs(VuiFlexContainer, Object.assign({ justifyContent: "spaceBetween", alignItems: "center", spacing: "s" }, { children: [label ? (_jsxs(VuiLabel, Object.assign({ labelFor: labelFor, size: labelSize }, { children: [label, isRequired && " (required)"] }))) : (_jsx("span", {})), labelRightContent] })), _jsx(VuiSpacer, { size: labelSize === "s" ? "xs" : "xxs" })] })), helpText && (_jsxs(_Fragment, { children: [_jsx(VuiText, Object.assign({ size: "xs", id: ariaDescribedByLabel }, { children: _jsx("p", { children: _jsx(VuiTextColor, Object.assign({ color: "subdued" }, { children: helpText })) }) })), _jsx(VuiSpacer, { size: "xs" })] })), errorMessages && (_jsxs(_Fragment, { children: [errorMessages, _jsx(VuiSpacer, { size: "xs" })] })), content] }));
+    const props = {
+        label,
+        labelRightContent,
+        labelFor,
+        labelSize,
+        isRequired,
+        helpText,
+        ariaDescribedByLabel,
+        errorMessages,
+        content
+    };
+    if (inline) {
+        return _jsx(VuiInlineFormGroup, Object.assign({}, props));
+    }
+    return _jsx(VuiBlockFormGroup, Object.assign({}, props));
 };

package/lib/components/formGroup/InlineFormGroup.d.ts

@@ -0,0 +1,2 @@
+import { FormGroupProps } from "./types";
+export declare const VuiInlineFormGroup: ({ label, labelRightContent, labelFor, labelSize, isRequired, helpText, ariaDescribedByLabel, errorMessages, content }: FormGroupProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/formGroup/InlineFormGroup.js

@@ -0,0 +1,14 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { VuiLabel } from "../form/label/Label";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiInfoTooltip } from "../tooltip/InfoTooltip";
+import { BiError } from "react-icons/bi";
+import classNames from "classnames";
+import { VuiTextColor } from "../typography/TextColor";
+export const VuiInlineFormGroup = ({ label, labelRightContent, labelFor, labelSize, isRequired, helpText, ariaDescribedByLabel, errorMessages, content }) => {
+    const hasErrors = errorMessages && errorMessages.length > 0;
+    const classes = classNames("vuiInlineFormGroup", {
+        "vuiInlineFormGroup-hasError": hasErrors
+    });
+    return (_jsxs(VuiFlexContainer, Object.assign({ className: classes, spacing: "none", alignItems: "stretch" }, { children: [(label || labelRightContent) && (_jsxs(VuiFlexContainer, Object.assign({ justifyContent: "spaceBetween", className: "vuiInlineFormGroup__label", alignItems: "center", spacing: "xs" }, { children: [label ? (_jsx(VuiLabel, Object.assign({ labelFor: labelFor, size: labelSize }, { children: _jsxs(VuiTextColor, Object.assign({ color: "subdued" }, { children: [label, isRequired && " (required)"] })) }))) : (_jsx("span", {})), labelRightContent, helpText && _jsx(VuiInfoTooltip, { tip: helpText, id: ariaDescribedByLabel }), hasErrors && _jsx(VuiInfoTooltip, { color: "danger", icon: _jsx(BiError, {}), tip: errorMessages })] }))), content] })));
+};

package/lib/components/formGroup/_index.scss

@@ -0,0 +1,25 @@
+.vuiInlineFormGroup {
+  select,
+  input,
+  textarea {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-left: none;
+  }
+}
+
+.vuiInlineFormGroup__label {
+  border-top-left-radius: $sizeXxs;
+  border-bottom-left-radius: $sizeXxs;
+  background-color: var(--vui-color-light-shade);
+  padding: 0 $sizeS;
+  border: 1px solid var(--vui-color-medium-shade);
+}
+
+.vuiInlineFormGroup-hasError {
+  .vuiInlineFormGroup__label {
+    border-top-color: var(--vui-color-danger-shade);
+    border-left-color: var(--vui-color-danger-shade);
+    border-bottom-color: var(--vui-color-danger-shade);
+  }
+}

package/lib/components/formGroup/types.d.ts

@@ -0,0 +1,11 @@
+export type FormGroupProps = {
+    label?: string;
+    labelRightContent: React.ReactNode;
+    labelFor?: string;
+    labelSize: "s" | "xs";
+    isRequired?: boolean;
+    helpText: React.ReactNode;
+    ariaDescribedByLabel: string;
+    errorMessages?: JSX.Element[];
+    content: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+};

package/lib/components/formGroup/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/modal/Modal.js

@@ -72,7 +72,13 @@ export const VuiModal = (_a) => {
         "vuiModalContainer-isLoaded": showTransition
     });
     const classes = classNames("vuiModal", `vuiModal--${color}`, `vuiModal--${size}`, className);
-    return (_jsx(VuiPortal, { children: (isOpen || isContentVisible || showTransition) && (_jsx(VuiScreenBlock, Object.assign({ type: "modal", isHidden: !isOpen }, { children: _jsx(FocusOn, Object.assign({ onEscapeKey: onCloseDelayed, onClickOutside: canClickOutsideToClose ? handleClickOutside : undefined, 
+    return (_jsx(VuiPortal, { children: (isOpen || isContentVisible || showTransition) && (_jsx(VuiScreenBlock, Object.assign({ type: "modal", isHidden: !isOpen }, { children: _jsx(FocusOn
+            // Disable the focus guard as soon as the modal begins closing
+            // so it doesn't intercept clicks while transitioning out.
+            , Object.assign({ 
+                // Disable the focus guard as soon as the modal begins closing
+                // so it doesn't intercept clicks while transitioning out.
+                enabled: isOpen, onEscapeKey: onCloseDelayed, onClickOutside: canClickOutsideToClose ? handleClickOutside : undefined, 
                 // Enable manual focus return to work.
                 returnFocus: false, 
                 // Enable focus on contents when it's open,

package/lib/components/modal/_index.scss

@@ -28,11 +28,15 @@
   background-color: var(--vui-color-empty-shade);
   border-radius: $sizeXxs;
   z-index: $modalZIndex;
-  pointer-events: all;
+  pointer-events: none;
   box-shadow: rgba(57, 57, 75, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
   transition: height $transitionSpeed, max-width $transitionSpeed, max-height $transitionSpeed;
 }
 
+.vuiModalContainer-isLoaded .vuiModal {
+  pointer-events: all;
+}
+
 $size: (
   s: 500px,
   m: 900px,

package/lib/components/popover/Popover.js

@@ -167,7 +167,13 @@ export const VuiPopover = (_a) => {
         "vuiPopoverContent--padding": padding === true,
         "vuiPopoverContent--paddingNone": padding === "none"
     });
-    return (_jsxs(_Fragment, { children: [button, _jsx(VuiPortal, { children: (isOpen || isContentVisible || showTransition) && position && (_jsx(FocusOn, Object.assign({ onEscapeKey: onCloseDelayed, onClickOutside: onCloseDelayed, 
+    return (_jsxs(_Fragment, { children: [button, _jsx(VuiPortal, { children: (isOpen || isContentVisible || showTransition) && position && (_jsx(FocusOn
+                // Disable the focus guard as soon as the popover begins closing
+                // so it doesn't intercept clicks while transitioning out.
+                , Object.assign({ 
+                    // Disable the focus guard as soon as the popover begins closing
+                    // so it doesn't intercept clicks while transitioning out.
+                    enabled: isOpen, onEscapeKey: onCloseDelayed, onClickOutside: onCloseDelayed, 
                     // Enable manual focus return to work.
                     returnFocus: false, 
                     // Enable focus on contents when it's open,

package/lib/components/popover/_index.scss

@@ -9,11 +9,13 @@
   opacity: 0;
   transform: translateY(-$sizeXs);
   transition: opacity $transitionSpeed, transform $transitionSpeed;
+  pointer-events: none;
 }
 
 .vuiPopover-isLoaded {
   opacity: 1;
   transform: translateY(0);
+  pointer-events: auto;
 }
 
 .vuiPopover--allowOverflow {

package/lib/components/tooltip/InfoTooltip.d.ts

@@ -1,4 +1,7 @@
 import { Props as TooltipProps } from "./Tooltip";
-type Props = Omit<TooltipProps, "children">;
+type Props = Omit<TooltipProps, "children"> & {
+    color?: "danger" | "warning" | "success" | "subdued";
+    icon?: React.ReactNode;
+};
 export declare const VuiInfoTooltip: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/tooltip/InfoTooltip.js

@@ -1,7 +1,19 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { BiHelpCircle } from "react-icons/bi";
 import { VuiIcon } from "../icon/Icon";
 import { VuiTooltip } from "./Tooltip";
 export const VuiInfoTooltip = (props) => {
-    return (_jsx(VuiTooltip, Object.assign({}, props, { children: _jsx(VuiIcon, Object.assign({ color: "subdued", size: "s" }, { children: _jsx(BiHelpCircle, {}) })) })));
+    const { icon, color = "subdued" } = props, rest = __rest(props, ["icon", "color"]);
+    return (_jsx(VuiTooltip, Object.assign({}, rest, { children: _jsx(VuiIcon, Object.assign({ color: color, size: "s" }, { children: icon ? icon : _jsx(BiHelpCircle, {}) })) })));
 };

package/lib/components/tooltip/Tooltip.d.ts

@@ -5,5 +5,6 @@ export type Props = {
     darkTheme?: boolean;
     position?: TooltipRefProps["place"];
     usePortal?: boolean;
+    id?: string;
 };
-export declare const VuiTooltip: ({ children, darkTheme, position, tip, usePortal }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiTooltip: ({ children, darkTheme, position, tip, usePortal, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/tooltip/Tooltip.js

@@ -1,8 +1,21 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, cloneElement } from "react";
 import { Tooltip } from "react-tooltip";
 import { useVuiContext } from "../context/Context";
 import { VuiPortal } from "../portal/Portal";
+import { VuiText } from "../typography/Text";
+import { VuiTextColor } from "../typography/TextColor";
 const generateTooltipId = () => {
     return `tooltip-${Math.random().toString(36).slice(2, 9)}`;
 };
@@ -26,15 +39,17 @@ const needsTabIndex = (element) => {
     }
     return true;
 };
-export const VuiTooltip = ({ children, darkTheme, position, tip, usePortal }) => {
+export const VuiTooltip = (_a) => {
+    var { children, darkTheme, position, tip, usePortal } = _a, rest = __rest(_a, ["children", "darkTheme", "position", "tip", "usePortal"]);
     const { getThemeStyle } = useVuiContext();
-    const [id] = useState(generateTooltipId());
-    const target = cloneElement(children, Object.assign({ "data-tooltip-id": id }, (needsTabIndex(children) && { tabIndex: 0 })));
+    const [tooltipId] = useState(generateTooltipId());
+    const target = cloneElement(children, Object.assign(Object.assign({ "data-tooltip-id": tooltipId }, (needsTabIndex(children) && { tabIndex: 0 })), rest));
     // Tooltips can be used in a dark-themed component, so we need to explicitly set
     // the light theme class in order to enable having a different theme than the
     // parent.
     const style = getThemeStyle(darkTheme ? "dark" : "light");
-    const tooltip = (_jsx(Tooltip, Object.assign({ id: id, offset: 10, className: "vuiTooltip", style: style, opacity: 1, place: position }, { children: tip })));
+    const content = typeof tip === "string" ? (_jsx(VuiText, Object.assign({ size: "xs" }, { children: _jsx("p", { children: _jsx(VuiTextColor, Object.assign({ color: "empty" }, { children: tip })) }) }))) : (tip);
+    const tooltip = (_jsx(Tooltip, Object.assign({ id: tooltipId, offset: 10, className: "vuiTooltip", style: style, opacity: 1, place: position }, { children: content })));
     return (_jsxs(_Fragment, { children: [target, usePortal ? _jsx(VuiPortal, { children: tooltip }) : tooltip] }));
 };
 // This is a workaround for the issue with ResizeObserver in ReactTooltip.

package/lib/styles/index.css

@@ -2477,6 +2477,7 @@ h2.react-datepicker__current-month {
   z-index: 11;
   right: -680px;
   transition: right 0.2s cubic-bezier(0, 1, 0, 1);
+  pointer-events: none;
 }
 @media screen and (max-width: 696px) {
   .vuiDrawer {
@@ -2486,6 +2487,7 @@ h2.react-datepicker__current-month {
 
 .vuiDrawer-isLoaded {
   right: 0;
+  pointer-events: auto;
 }
 
 .vuiDrawerHeader {
@@ -3049,6 +3051,28 @@ h2.react-datepicker__current-month {
   max-height: 12rem;
 }
 
+.vuiInlineFormGroup select,
+.vuiInlineFormGroup input,
+.vuiInlineFormGroup textarea {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left: none;
+}
+
+.vuiInlineFormGroup__label {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  background-color: var(--vui-color-light-shade);
+  padding: 0 12px;
+  border: 1px solid var(--vui-color-medium-shade);
+}
+
+.vuiInlineFormGroup-hasError .vuiInlineFormGroup__label {
+  border-top-color: var(--vui-color-danger-shade);
+  border-left-color: var(--vui-color-danger-shade);
+  border-bottom-color: var(--vui-color-danger-shade);
+}
+
 .vuiGridContainer {
   container-type: inline-size;
   width: 100%;
@@ -4211,11 +4235,15 @@ h2.react-datepicker__current-month {
   background-color: var(--vui-color-empty-shade);
   border-radius: 4px;
   z-index: 12;
-  pointer-events: all;
+  pointer-events: none;
   box-shadow: rgba(57, 57, 75, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
   transition: height 0.2s, max-width 0.2s, max-height 0.2s;
 }
 
+.vuiModalContainer-isLoaded .vuiModal {
+  pointer-events: all;
+}
+
 .vuiModal--s {
   max-width: 500px;
 }
@@ -4538,11 +4566,13 @@ h2.react-datepicker__current-month {
   opacity: 0;
   transform: translateY(-8px);
   transition: opacity 0.2s, transform 0.2s;
+  pointer-events: none;
 }
 
 .vuiPopover-isLoaded {
   opacity: 1;
   transform: translateY(0);
+  pointer-events: auto;
 }
 
 .vuiPopover--allowOverflow {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "18.2.2",
+  "version": "18.3.0",
   "homepage": "./",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",

package/src/docs/pages/formGroup/FormGroup.tsx

@@ -6,13 +6,16 @@ import {
   VuiSpacer,
   VuiSuperRadioGroup,
   VuiTextArea,
-  VuiTextInput
+  VuiTextInput,
+  VuiToggle
 } from "../../../lib";
 import { Subsection } from "../../components/Subsection";
 
 type Pizza = "pepperoni" | "mushrooms" | "jalapenos";
 
 export const FormGroup = () => {
+  const [inline, setInline] = useState(false);
+  const [showError, setShowError] = useState(false);
   const [group, setGroup] = useState<RadioButtonConfig<Pizza>[]>([
     {
       label: "Pepperoni",
@@ -45,11 +48,20 @@ export const FormGroup = () => {
 
   return (
     <>
+      <VuiToggle label="Show error message" onChange={(e) => setShowError(e.target.checked)} />
+
+      <VuiSpacer size="m" />
+      <VuiToggle label="Inline" onChange={(event) => setInline(event.target.checked)} checked={inline} />
+
+      <VuiSpacer size="m" />
+
       <Subsection title="With help text">
         <VuiFormGroup
           label="Choose an option"
           labelFor="optionsList1"
           helpText="Some helpful information about this input."
+          inline={inline}
+          errors={showError ? ["This is an error message."] : []}
         >
           <VuiSelect
             id="optionsList1"
@@ -61,25 +73,48 @@ export const FormGroup = () => {
 
         <VuiSpacer size="m" />
 
-        <VuiFormGroup label="Enter input" labelFor="input1" helpText="Some helpful information about this input.">
+        <VuiFormGroup
+          label="Enter input"
+          labelFor="input1"
+          helpText="Some helpful information about this input."
+          inline={inline}
+          errors={showError ? ["This is an error message."] : []}
+        >
           <VuiTextInput id="input1" value="Text input" onChange={(event) => console.log(event.target.value)} />
         </VuiFormGroup>
 
         <VuiSpacer size="m" />
 
-        <VuiFormGroup label="Select option" labelFor="superRadioGroup" helpText="Choose wisely.">
+        <VuiFormGroup
+          label="Select option"
+          labelFor="superRadioGroup"
+          helpText="Choose wisely."
+          inline={inline}
+          errors={showError ? ["This is an error message."] : []}
+        >
           <VuiSuperRadioGroup groupName="superRadioGroup" group={group} onChange={onChange} />
         </VuiFormGroup>
 
         <VuiSpacer size="m" />
 
-        <VuiFormGroup label="Enter text" labelFor="textArea" helpText="Enter some text here.">
+        <VuiFormGroup
+          label="Enter text"
+          labelFor="textArea"
+          helpText="Enter some text here."
+          inline={inline}
+          errors={showError ? ["This is an error message."] : []}
+        >
           <VuiTextArea id="textArea" value="Text area" onChange={() => undefined} />
         </VuiFormGroup>
       </Subsection>
 
       <Subsection title="Without help text">
-        <VuiFormGroup label="Choose an option" labelFor="optionsList2">
+        <VuiFormGroup
+          label="Choose an option"
+          labelFor="optionsList2"
+          inline={inline}
+          errors={showError ? ["This is an error message."] : []}
+        >
           <VuiSelect
             id="optionsList2"
             options={[{ text: "Option A", value: "a" }]}