@canonical/react-components 4.6.0 → 4.6.2

package/dist/components/CheckboxInput/CheckboxInput.d.ts

@@ -1,10 +1,19 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import type { CheckableInputProps } from "./CheckableInput";
-export type Props = Omit<CheckableInputProps, "inputType">;
+export type Props = Omit<CheckableInputProps, "inputType"> & {
+    caution?: ReactNode;
+    className?: string;
+    error?: ReactNode;
+    help?: ReactNode;
+    helpClassName?: string;
+    id?: string;
+    inline?: boolean;
+    success?: ReactNode;
+};
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Checkbox input](https://docs.vanillaframework.io/base/forms#checkbox).
  *
  * Use the checkbox component to select one or more options.
  */
-declare const CheckboxInput: ({ label, indeterminate, ...checkboxProps }: Props) => React.JSX.Element;
+declare const CheckboxInput: ({ label, indeterminate, caution, className, error, help, helpClassName, id, inline, success, ...checkboxProps }: Props) => React.JSX.Element;
 export default CheckboxInput;

package/dist/components/CheckboxInput/CheckboxInput.js

@@ -4,9 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _CheckableInput = _interopRequireDefault(require("./CheckableInput"));
-const _excluded = ["label", "indeterminate"];
+var _Field = _interopRequireDefault(require("../Field"));
+const _excluded = ["label", "indeterminate", "caution", "className", "error", "help", "helpClassName", "id", "inline", "success"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
@@ -19,13 +23,55 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 const CheckboxInput = _ref => {
   let {
       label,
-      indeterminate = false
+      indeterminate = false,
+      caution,
+      className,
+      error,
+      help,
+      helpClassName,
+      id,
+      inline,
+      success
     } = _ref,
     checkboxProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_CheckableInput.default, _extends({
-    label: label,
+  const defaultInputId = (0, _react.useId)();
+  const inputId = id || defaultInputId;
+  const validationId = (0, _react.useId)();
+  const helpId = (0, _react.useId)();
+  const hasError = !!error;
+  return /*#__PURE__*/_react.default.createElement(_Field.default, {
+    caution: caution,
+    className: (0, _classnames.default)("p-checkbox-wrapper", className, {
+      "p-checkbox--inline": inline
+    }),
+    error: error,
+    forId: inputId,
+    help: help,
+    helpClassName: helpClassName,
+    helpId: helpId,
+    inline: inline,
+    isTickElement: true,
+    success: success,
+    validationId: validationId
+  }, /*#__PURE__*/_react.default.createElement(_CheckableInput.default, _extends({}, checkboxProps, {
+    "aria-describedby": help ? helpId : undefined,
+    "aria-errormessage": hasError ? validationId : undefined,
+    "aria-invalid": hasError,
+    id: inputId,
+    indeterminate: indeterminate,
+    inline: inline,
     inputType: "checkbox",
-    indeterminate: indeterminate
-  }, checkboxProps));
+    label: label
+  })));
+};
+CheckboxInput.propTypes = {
+  caution: _propTypes.default.node,
+  className: _propTypes.default.string,
+  error: _propTypes.default.node,
+  help: _propTypes.default.node,
+  helpClassName: _propTypes.default.string,
+  id: _propTypes.default.string,
+  inline: _propTypes.default.bool,
+  success: _propTypes.default.node
 };
 var _default = exports.default = CheckboxInput;

package/dist/components/CheckboxInput/CheckboxInput.stories.d.ts

@@ -4,8 +4,12 @@ declare const meta: Meta<typeof CheckboxInput>;
 export default meta;
 type Story = StoryObj<typeof CheckboxInput>;
 export declare const Default: Story;
-export declare const Children: Story;
+export declare const Caution: Story;
 export declare const Disabled: Story;
-export declare const Required: Story;
-export declare const Inline: Story;
+export declare const Error: Story;
+export declare const Help: Story;
 export declare const Indeterminate: Story;
+export declare const Inline: Story;
+export declare const LabelWithChildElements: Story;
+export declare const Required: Story;
+export declare const Success: Story;

package/dist/components/CheckboxInput/CheckboxInput.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Required = exports.Inline = exports.Indeterminate = exports.Disabled = exports.Default = exports.Children = void 0;
+exports.default = exports.Success = exports.Required = exports.LabelWithChildElements = exports.Inline = exports.Indeterminate = exports.Help = exports.Error = exports.Disabled = exports.Default = exports.Caution = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _CheckboxInput = _interopRequireDefault(require("./CheckboxInput"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -45,14 +45,12 @@ var _default = exports.default = meta;
 const Default = exports.Default = {
   name: "Default"
 };
-const Children = exports.Children = {
+const Caution = exports.Caution = {
   render: () => /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
-    label: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "I agree to", /*#__PURE__*/_react.default.createElement("a", {
-      href: "http://ubuntu.com/legal"
-    }, "Terms and Conditions")),
-    name: "CheckboxInput"
+    label: "Caution",
+    caution: "This is a caution message"
   }),
-  name: "Label with child elements"
+  name: "Caution"
 };
 const Disabled = exports.Disabled = {
   render: () => /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
@@ -61,19 +59,19 @@ const Disabled = exports.Disabled = {
   }),
   name: "Disabled"
 };
-const Required = exports.Required = {
+const Error = exports.Error = {
   render: () => /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
-    label: "Required",
-    required: true
+    label: "Error",
+    error: "This is an error message"
   }),
-  name: "Required"
+  name: "Error"
 };
-const Inline = exports.Inline = {
+const Help = exports.Help = {
   render: () => /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
-    label: "Inline",
-    inline: true
+    label: "Help",
+    help: "This is a help message"
   }),
-  name: "Inline"
+  name: "Help"
 };
 const Indeterminate = exports.Indeterminate = {
   render: () => /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
@@ -81,4 +79,34 @@ const Indeterminate = exports.Indeterminate = {
     indeterminate: true
   }),
   name: "Indeterminate"
+};
+const Inline = exports.Inline = {
+  render: () => /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
+    inline: true,
+    label: "Inline"
+  }),
+  name: "Inline"
+};
+const LabelWithChildElements = exports.LabelWithChildElements = {
+  render: () => /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
+    label: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "I agree to", /*#__PURE__*/_react.default.createElement("a", {
+      href: "http://ubuntu.com/legal"
+    }, "Terms and Conditions")),
+    name: "CheckboxInput"
+  }),
+  name: "Label with child elements"
+};
+const Required = exports.Required = {
+  render: () => /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
+    label: "Required",
+    required: true
+  }),
+  name: "Required"
+};
+const Success = exports.Success = {
+  render: () => /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
+    label: "Success",
+    success: "This is a success message"
+  }),
+  name: "Success"
 };

package/dist/components/Field/Field.d.ts

@@ -42,6 +42,10 @@ export type Props = {
      * An id to give to the help element.
      */
     helpId?: string;
+    /**
+     * Whether the component is inline.
+     */
+    inline?: boolean;
     /**
      * Whether the component is wrapping a select element.
      */
@@ -87,5 +91,5 @@ export type Props = {
      */
     validationId?: string;
 };
-declare const Field: ({ caution, children, className, error, forId, help, helpClassName, helpAfterLabel, helpId, isSelect, isTickElement, label, labelClassName, labelFirst, required, stacked, stackedFieldColumns, stackedLabelColumns, success, validationId, ...props }: Props) => React.JSX.Element;
+declare const Field: ({ caution, children, className, error, forId, help, helpClassName, helpAfterLabel, helpId, inline, isSelect, isTickElement, label, labelClassName, labelFirst, required, stacked, stackedFieldColumns, stackedLabelColumns, success, validationId, ...props }: Props) => React.JSX.Element;
 export default Field;

package/dist/components/Field/Field.js

@@ -8,7 +8,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
 var _Label = _interopRequireDefault(require("../Label"));
 var _Col = _interopRequireDefault(require("../Col"));
-const _excluded = ["caution", "children", "className", "error", "forId", "help", "helpClassName", "helpAfterLabel", "helpId", "isSelect", "isTickElement", "label", "labelClassName", "labelFirst", "required", "stacked", "stackedFieldColumns", "stackedLabelColumns", "success", "validationId"];
+const _excluded = ["caution", "children", "className", "error", "forId", "help", "helpClassName", "helpAfterLabel", "helpId", "inline", "isSelect", "isTickElement", "label", "labelClassName", "labelFirst", "required", "stacked", "stackedFieldColumns", "stackedLabelColumns", "success", "validationId"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
@@ -67,10 +67,14 @@ const generateContent = _ref2 => {
     caution,
     success,
     validationId,
-    helpAfterLabel
+    helpAfterLabel,
+    inline
   } = _ref2;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "p-form__control u-clearfix"
+  const WrapperComponent = inline ? "span" : "div";
+  return /*#__PURE__*/_react.default.createElement(WrapperComponent, {
+    className: (0, _classnames.default)("p-form__control", {
+      "u-clearfix": !inline
+    })
   }, isSelect ? /*#__PURE__*/_react.default.createElement("div", {
     className: "p-form-validation__select-wrapper"
   }, children) : children, !labelFirst && labelNode, helpAfterLabel ? null : help, generateError(error, caution, success, validationId));
@@ -86,6 +90,7 @@ const Field = _ref3 => {
       helpClassName,
       helpAfterLabel,
       helpId,
+      inline,
       isSelect,
       isTickElement,
       label,
@@ -116,9 +121,11 @@ const Field = _ref3 => {
     caution,
     success,
     validationId,
-    helpAfterLabel
+    helpAfterLabel,
+    inline
   });
-  return /*#__PURE__*/_react.default.createElement("div", _extends({
+  const WrapperComponent = inline ? "span" : "div";
+  return /*#__PURE__*/_react.default.createElement(WrapperComponent, _extends({
     className: (0, _classnames.default)("p-form__group", "p-form-validation", className, {
       "is-error": error,
       "is-caution": caution,

package/dist/components/Input/Input.js

@@ -52,7 +52,6 @@ const Input = _ref => {
     } = _ref,
     inputProps = _objectWithoutProperties(_ref, _excluded);
   const inputRef = (0, _react.useRef)(null);
-  const fieldLabel = !["checkbox", "radio"].includes(type) ? label : "";
   const defaultInputId = (0, _react.useId)();
   const inputId = id || defaultInputId;
   const validationId = (0, _react.useId)();
@@ -75,22 +74,30 @@ const Input = _ref => {
       }
     }
   }, [takeFocus, takeFocusDelay]);
-  let input;
   if (type === "checkbox") {
-    input = /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, _extends({
+    return /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, _extends({
       label: label,
-      labelClassName: labelClassName
+      labelClassName: labelClassName,
+      caution: caution,
+      className: wrapperClassName,
+      error: error,
+      help: help,
+      helpClassName: helpClassName,
+      required: required,
+      success: success
     }, commonProps));
-  } else if (type === "radio") {
-    input = /*#__PURE__*/_react.default.createElement(_RadioInput.default, _extends({
+  }
+  if (type === "radio") {
+    return /*#__PURE__*/_react.default.createElement(_RadioInput.default, _extends({
       label: label,
-      labelClassName: labelClassName
-    }, commonProps));
-  } else {
-    input = /*#__PURE__*/_react.default.createElement("input", _extends({
-      className: (0, _classnames.default)("p-form-validation__input", className),
-      ref: inputRef,
-      type: type
+      labelClassName: labelClassName,
+      caution: caution,
+      className: wrapperClassName,
+      error: error,
+      help: help,
+      helpClassName: helpClassName,
+      required: required,
+      success: success
     }, commonProps));
   }
   return /*#__PURE__*/_react.default.createElement(_Field.default, {
@@ -102,8 +109,7 @@ const Input = _ref => {
     helpAfterLabel: helpAfterLabel,
     helpClassName: helpClassName,
     helpId: helpId,
-    isTickElement: type === "checkbox" || type === "radio",
-    label: fieldLabel,
+    label: label,
     labelClassName: labelClassName,
     required: required,
     stacked: stacked,
@@ -111,6 +117,10 @@ const Input = _ref => {
     stackedLabelColumns: stackedLabelColumns,
     success: success,
     validationId: validationId
-  }, input);
+  }, /*#__PURE__*/_react.default.createElement("input", _extends({
+    className: (0, _classnames.default)("p-form-validation__input", className),
+    ref: inputRef,
+    type: type
+  }, commonProps)));
 };
 var _default = exports.default = Input;

package/dist/components/RadioInput/RadioInput.d.ts

@@ -1,10 +1,20 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import type { CheckableInputProps } from "../CheckboxInput/CheckableInput";
-export type Props = Omit<CheckableInputProps, "inputType">;
+export type Props = Omit<CheckableInputProps, "inputType"> & {
+    caution?: ReactNode;
+    className?: string;
+    error?: ReactNode;
+    help?: ReactNode;
+    helpClassName?: string;
+    id?: string;
+    inline?: boolean;
+    success?: ReactNode;
+    wrapperClassName?: string;
+};
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Radio input](https://docs.vanillaframework.io/base/forms#radio-button).
  *
  * Use radio buttons to select one of the given set of options.
  */
-declare const RadioInput: ({ label, ...radioProps }: Props) => React.JSX.Element;
+declare const RadioInput: ({ label, caution, className, error, help, helpClassName, id, inline, success, ...radioProps }: Props) => React.JSX.Element;
 export default RadioInput;

package/dist/components/RadioInput/RadioInput.js

@@ -4,9 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _CheckableInput = _interopRequireDefault(require("../CheckboxInput/CheckableInput"));
-const _excluded = ["label"];
+var _Field = _interopRequireDefault(require("../Field"));
+const _excluded = ["label", "caution", "className", "error", "help", "helpClassName", "id", "inline", "success"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
@@ -18,12 +22,55 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
  */
 const RadioInput = _ref => {
   let {
-      label
+      label,
+      caution,
+      className,
+      error,
+      help,
+      helpClassName,
+      id,
+      inline,
+      success
     } = _ref,
     radioProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_CheckableInput.default, _extends({
+  const defaultInputId = (0, _react.useId)();
+  const inputId = id || defaultInputId;
+  const validationId = (0, _react.useId)();
+  const helpId = (0, _react.useId)();
+  const hasError = !!error;
+  return /*#__PURE__*/_react.default.createElement(_Field.default, {
+    caution: caution,
+    className: (0, _classnames.default)("p-radio-wrapper", className, {
+      "p-radio--inline": inline
+    }),
+    error: error,
+    forId: inputId,
+    help: help,
+    helpClassName: helpClassName,
+    helpId: helpId,
+    isTickElement: true,
+    success: success,
+    validationId: validationId,
+    inline: inline
+  }, /*#__PURE__*/_react.default.createElement(_CheckableInput.default, _extends({}, radioProps, {
+    "aria-describedby": help ? helpId : undefined,
+    "aria-errormessage": hasError ? validationId : undefined,
+    "aria-invalid": hasError,
+    id: inputId,
+    inline: inline,
     inputType: "radio",
     label: label
-  }, radioProps));
+  })));
+};
+RadioInput.propTypes = {
+  caution: _propTypes.default.node,
+  className: _propTypes.default.string,
+  error: _propTypes.default.node,
+  help: _propTypes.default.node,
+  helpClassName: _propTypes.default.string,
+  id: _propTypes.default.string,
+  inline: _propTypes.default.bool,
+  success: _propTypes.default.node,
+  wrapperClassName: _propTypes.default.string
 };
 var _default = exports.default = RadioInput;

package/dist/components/RadioInput/RadioInput.stories.d.ts

@@ -4,7 +4,11 @@ declare const meta: Meta<typeof RadioInput>;
 export default meta;
 type Story = StoryObj<typeof RadioInput>;
 export declare const Default: Story;
+export declare const Caution: Story;
 export declare const Children: Story;
 export declare const Disabled: Story;
-export declare const Required: Story;
+export declare const Error: Story;
+export declare const Help: Story;
 export declare const Inline: Story;
+export declare const Required: Story;
+export declare const Success: Story;

package/dist/components/RadioInput/RadioInput.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Required = exports.Inline = exports.Disabled = exports.Default = exports.Children = void 0;
+exports.default = exports.Success = exports.Required = exports.Inline = exports.Help = exports.Error = exports.Disabled = exports.Default = exports.Children = exports.Caution = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _RadioInput = _interopRequireDefault(require("./RadioInput"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -48,6 +48,13 @@ const Default = exports.Default = {
   }),
   name: "Default"
 };
+const Caution = exports.Caution = {
+  render: () => /*#__PURE__*/_react.default.createElement(_RadioInput.default, {
+    label: "Caution",
+    caution: "This is a caution message"
+  }),
+  name: "Caution"
+};
 const Children = exports.Children = {
   render: () => /*#__PURE__*/_react.default.createElement(_RadioInput.default, {
     label: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "I agree to", /*#__PURE__*/_react.default.createElement("a", {
@@ -65,6 +72,27 @@ const Disabled = exports.Disabled = {
   }),
   name: "Disabled"
 };
+const Error = exports.Error = {
+  render: () => /*#__PURE__*/_react.default.createElement(_RadioInput.default, {
+    label: "Error",
+    error: "This is an error message"
+  }),
+  name: "Error"
+};
+const Help = exports.Help = {
+  render: () => /*#__PURE__*/_react.default.createElement(_RadioInput.default, {
+    label: "Help",
+    help: "This is a help message"
+  }),
+  name: "Help"
+};
+const Inline = exports.Inline = {
+  render: () => /*#__PURE__*/_react.default.createElement(_RadioInput.default, {
+    inline: true,
+    label: "Inline"
+  }),
+  name: "Inline"
+};
 const Required = exports.Required = {
   render: () => /*#__PURE__*/_react.default.createElement(_RadioInput.default, {
     label: "Required",
@@ -73,11 +101,10 @@ const Required = exports.Required = {
   }),
   name: "Required"
 };
-const Inline = exports.Inline = {
+const Success = exports.Success = {
   render: () => /*#__PURE__*/_react.default.createElement(_RadioInput.default, {
-    label: "Inline",
-    name: "RadioInput",
-    inline: true
+    label: "Success",
+    success: "This is a success message"
   }),
-  name: "Inline"
+  name: "Success"
 };

package/dist/esm/components/CheckboxInput/CheckboxInput.d.ts

@@ -1,10 +1,19 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import type { CheckableInputProps } from "./CheckableInput";
-export type Props = Omit<CheckableInputProps, "inputType">;
+export type Props = Omit<CheckableInputProps, "inputType"> & {
+    caution?: ReactNode;
+    className?: string;
+    error?: ReactNode;
+    help?: ReactNode;
+    helpClassName?: string;
+    id?: string;
+    inline?: boolean;
+    success?: ReactNode;
+};
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Checkbox input](https://docs.vanillaframework.io/base/forms#checkbox).
  *
  * Use the checkbox component to select one or more options.
  */
-declare const CheckboxInput: ({ label, indeterminate, ...checkboxProps }: Props) => React.JSX.Element;
+declare const CheckboxInput: ({ label, indeterminate, caution, className, error, help, helpClassName, id, inline, success, ...checkboxProps }: Props) => React.JSX.Element;
 export default CheckboxInput;

package/dist/esm/components/CheckboxInput/CheckboxInput.js

@@ -1,9 +1,12 @@
-var _excluded = ["label", "indeterminate"];
+import _pt from "prop-types";
+var _excluded = ["label", "indeterminate", "caution", "className", "error", "help", "helpClassName", "id", "inline", "success"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React from "react";
+import React, { useId } from "react";
+import classnames from "classnames";
 import CheckableInput from "./CheckableInput";
+import Field from "../Field";
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Checkbox input](https://docs.vanillaframework.io/base/forms#checkbox).
  *
@@ -12,13 +15,55 @@ import CheckableInput from "./CheckableInput";
 var CheckboxInput = _ref => {
   var {
       label,
-      indeterminate = false
+      indeterminate = false,
+      caution,
+      className,
+      error,
+      help,
+      helpClassName,
+      id,
+      inline,
+      success
     } = _ref,
     checkboxProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(CheckableInput, _extends({
-    label: label,
+  var defaultInputId = useId();
+  var inputId = id || defaultInputId;
+  var validationId = useId();
+  var helpId = useId();
+  var hasError = !!error;
+  return /*#__PURE__*/React.createElement(Field, {
+    caution: caution,
+    className: classnames("p-checkbox-wrapper", className, {
+      "p-checkbox--inline": inline
+    }),
+    error: error,
+    forId: inputId,
+    help: help,
+    helpClassName: helpClassName,
+    helpId: helpId,
+    inline: inline,
+    isTickElement: true,
+    success: success,
+    validationId: validationId
+  }, /*#__PURE__*/React.createElement(CheckableInput, _extends({}, checkboxProps, {
+    "aria-describedby": help ? helpId : undefined,
+    "aria-errormessage": hasError ? validationId : undefined,
+    "aria-invalid": hasError,
+    id: inputId,
+    indeterminate: indeterminate,
+    inline: inline,
     inputType: "checkbox",
-    indeterminate: indeterminate
-  }, checkboxProps));
+    label: label
+  })));
+};
+CheckboxInput.propTypes = {
+  caution: _pt.node,
+  className: _pt.string,
+  error: _pt.node,
+  help: _pt.node,
+  helpClassName: _pt.string,
+  id: _pt.string,
+  inline: _pt.bool,
+  success: _pt.node
 };
 export default CheckboxInput;

package/dist/esm/components/CheckboxInput/CheckboxInput.stories.d.ts

@@ -4,8 +4,12 @@ declare const meta: Meta<typeof CheckboxInput>;
 export default meta;
 type Story = StoryObj<typeof CheckboxInput>;
 export declare const Default: Story;
-export declare const Children: Story;
+export declare const Caution: Story;
 export declare const Disabled: Story;
-export declare const Required: Story;
-export declare const Inline: Story;
+export declare const Error: Story;
+export declare const Help: Story;
 export declare const Indeterminate: Story;
+export declare const Inline: Story;
+export declare const LabelWithChildElements: Story;
+export declare const Required: Story;
+export declare const Success: Story;

package/dist/esm/components/CheckboxInput/CheckboxInput.stories.js

@@ -38,14 +38,12 @@ export default meta;
 export var Default = {
   name: "Default"
 };
-export var Children = {
+export var Caution = {
   render: () => /*#__PURE__*/React.createElement(CheckboxInput, {
-    label: /*#__PURE__*/React.createElement(React.Fragment, null, "I agree to", /*#__PURE__*/React.createElement("a", {
-      href: "http://ubuntu.com/legal"
-    }, "Terms and Conditions")),
-    name: "CheckboxInput"
+    label: "Caution",
+    caution: "This is a caution message"
   }),
-  name: "Label with child elements"
+  name: "Caution"
 };
 export var Disabled = {
   render: () => /*#__PURE__*/React.createElement(CheckboxInput, {
@@ -54,19 +52,19 @@ export var Disabled = {
   }),
   name: "Disabled"
 };
-export var Required = {
+export var Error = {
   render: () => /*#__PURE__*/React.createElement(CheckboxInput, {
-    label: "Required",
-    required: true
+    label: "Error",
+    error: "This is an error message"
   }),
-  name: "Required"
+  name: "Error"
 };
-export var Inline = {
+export var Help = {
   render: () => /*#__PURE__*/React.createElement(CheckboxInput, {
-    label: "Inline",
-    inline: true
+    label: "Help",
+    help: "This is a help message"
   }),
-  name: "Inline"
+  name: "Help"
 };
 export var Indeterminate = {
   render: () => /*#__PURE__*/React.createElement(CheckboxInput, {
@@ -74,4 +72,34 @@ export var Indeterminate = {
     indeterminate: true
   }),
   name: "Indeterminate"
+};
+export var Inline = {
+  render: () => /*#__PURE__*/React.createElement(CheckboxInput, {
+    inline: true,
+    label: "Inline"
+  }),
+  name: "Inline"
+};
+export var LabelWithChildElements = {
+  render: () => /*#__PURE__*/React.createElement(CheckboxInput, {
+    label: /*#__PURE__*/React.createElement(React.Fragment, null, "I agree to", /*#__PURE__*/React.createElement("a", {
+      href: "http://ubuntu.com/legal"
+    }, "Terms and Conditions")),
+    name: "CheckboxInput"
+  }),
+  name: "Label with child elements"
+};
+export var Required = {
+  render: () => /*#__PURE__*/React.createElement(CheckboxInput, {
+    label: "Required",
+    required: true
+  }),
+  name: "Required"
+};
+export var Success = {
+  render: () => /*#__PURE__*/React.createElement(CheckboxInput, {
+    label: "Success",
+    success: "This is a success message"
+  }),
+  name: "Success"
 };

package/dist/esm/components/Field/Field.d.ts

@@ -42,6 +42,10 @@ export type Props = {
      * An id to give to the help element.
      */
     helpId?: string;
+    /**
+     * Whether the component is inline.
+     */
+    inline?: boolean;
     /**
      * Whether the component is wrapping a select element.
      */
@@ -87,5 +91,5 @@ export type Props = {
      */
     validationId?: string;
 };
-declare const Field: ({ caution, children, className, error, forId, help, helpClassName, helpAfterLabel, helpId, isSelect, isTickElement, label, labelClassName, labelFirst, required, stacked, stackedFieldColumns, stackedLabelColumns, success, validationId, ...props }: Props) => React.JSX.Element;
+declare const Field: ({ caution, children, className, error, forId, help, helpClassName, helpAfterLabel, helpId, inline, isSelect, isTickElement, label, labelClassName, labelFirst, required, stacked, stackedFieldColumns, stackedLabelColumns, success, validationId, ...props }: Props) => React.JSX.Element;
 export default Field;

package/dist/esm/components/Field/Field.js

@@ -1,4 +1,4 @@
-var _excluded = ["caution", "children", "className", "error", "forId", "help", "helpClassName", "helpAfterLabel", "helpId", "isSelect", "isTickElement", "label", "labelClassName", "labelFirst", "required", "stacked", "stackedFieldColumns", "stackedLabelColumns", "success", "validationId"];
+var _excluded = ["caution", "children", "className", "error", "forId", "help", "helpClassName", "helpAfterLabel", "helpId", "inline", "isSelect", "isTickElement", "label", "labelClassName", "labelFirst", "required", "stacked", "stackedFieldColumns", "stackedLabelColumns", "success", "validationId"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
@@ -61,10 +61,14 @@ var generateContent = _ref2 => {
     caution,
     success,
     validationId,
-    helpAfterLabel
+    helpAfterLabel,
+    inline
   } = _ref2;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "p-form__control u-clearfix"
+  var WrapperComponent = inline ? "span" : "div";
+  return /*#__PURE__*/React.createElement(WrapperComponent, {
+    className: classNames("p-form__control", {
+      "u-clearfix": !inline
+    })
   }, isSelect ? /*#__PURE__*/React.createElement("div", {
     className: "p-form-validation__select-wrapper"
   }, children) : children, !labelFirst && labelNode, helpAfterLabel ? null : help, generateError(error, caution, success, validationId));
@@ -80,6 +84,7 @@ var Field = _ref3 => {
       helpClassName,
       helpAfterLabel,
       helpId,
+      inline,
       isSelect,
       isTickElement,
       label,
@@ -110,9 +115,11 @@ var Field = _ref3 => {
     caution,
     success,
     validationId,
-    helpAfterLabel
+    helpAfterLabel,
+    inline
   });
-  return /*#__PURE__*/React.createElement("div", _extends({
+  var WrapperComponent = inline ? "span" : "div";
+  return /*#__PURE__*/React.createElement(WrapperComponent, _extends({
     className: classNames("p-form__group", "p-form-validation", className, {
       "is-error": error,
       "is-caution": caution,

package/dist/esm/components/Input/Input.js

@@ -45,7 +45,6 @@ var Input = _ref => {
     } = _ref,
     inputProps = _objectWithoutProperties(_ref, _excluded);
   var inputRef = useRef(null);
-  var fieldLabel = !["checkbox", "radio"].includes(type) ? label : "";
   var defaultInputId = useId();
   var inputId = id || defaultInputId;
   var validationId = useId();
@@ -68,22 +67,30 @@ var Input = _ref => {
       }
     }
   }, [takeFocus, takeFocusDelay]);
-  var input;
   if (type === "checkbox") {
-    input = /*#__PURE__*/React.createElement(CheckboxInput, _extends({
+    return /*#__PURE__*/React.createElement(CheckboxInput, _extends({
       label: label,
-      labelClassName: labelClassName
+      labelClassName: labelClassName,
+      caution: caution,
+      className: wrapperClassName,
+      error: error,
+      help: help,
+      helpClassName: helpClassName,
+      required: required,
+      success: success
     }, commonProps));
-  } else if (type === "radio") {
-    input = /*#__PURE__*/React.createElement(RadioInput, _extends({
+  }
+  if (type === "radio") {
+    return /*#__PURE__*/React.createElement(RadioInput, _extends({
       label: label,
-      labelClassName: labelClassName
-    }, commonProps));
-  } else {
-    input = /*#__PURE__*/React.createElement("input", _extends({
-      className: classNames("p-form-validation__input", className),
-      ref: inputRef,
-      type: type
+      labelClassName: labelClassName,
+      caution: caution,
+      className: wrapperClassName,
+      error: error,
+      help: help,
+      helpClassName: helpClassName,
+      required: required,
+      success: success
     }, commonProps));
   }
   return /*#__PURE__*/React.createElement(Field, {
@@ -95,8 +102,7 @@ var Input = _ref => {
     helpAfterLabel: helpAfterLabel,
     helpClassName: helpClassName,
     helpId: helpId,
-    isTickElement: type === "checkbox" || type === "radio",
-    label: fieldLabel,
+    label: label,
     labelClassName: labelClassName,
     required: required,
     stacked: stacked,
@@ -104,6 +110,10 @@ var Input = _ref => {
     stackedLabelColumns: stackedLabelColumns,
     success: success,
     validationId: validationId
-  }, input);
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    className: classNames("p-form-validation__input", className),
+    ref: inputRef,
+    type: type
+  }, commonProps)));
 };
 export default Input;

package/dist/esm/components/RadioInput/RadioInput.d.ts

@@ -1,10 +1,20 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import type { CheckableInputProps } from "../CheckboxInput/CheckableInput";
-export type Props = Omit<CheckableInputProps, "inputType">;
+export type Props = Omit<CheckableInputProps, "inputType"> & {
+    caution?: ReactNode;
+    className?: string;
+    error?: ReactNode;
+    help?: ReactNode;
+    helpClassName?: string;
+    id?: string;
+    inline?: boolean;
+    success?: ReactNode;
+    wrapperClassName?: string;
+};
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Radio input](https://docs.vanillaframework.io/base/forms#radio-button).
  *
  * Use radio buttons to select one of the given set of options.
  */
-declare const RadioInput: ({ label, ...radioProps }: Props) => React.JSX.Element;
+declare const RadioInput: ({ label, caution, className, error, help, helpClassName, id, inline, success, ...radioProps }: Props) => React.JSX.Element;
 export default RadioInput;

package/dist/esm/components/RadioInput/RadioInput.js

@@ -1,9 +1,12 @@
-var _excluded = ["label"];
+import _pt from "prop-types";
+var _excluded = ["label", "caution", "className", "error", "help", "helpClassName", "id", "inline", "success"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React from "react";
+import React, { useId } from "react";
+import classnames from "classnames";
 import CheckableInput from "../CheckboxInput/CheckableInput";
+import Field from "../Field";
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Radio input](https://docs.vanillaframework.io/base/forms#radio-button).
  *
@@ -11,12 +14,55 @@ import CheckableInput from "../CheckboxInput/CheckableInput";
  */
 var RadioInput = _ref => {
   var {
-      label
+      label,
+      caution,
+      className,
+      error,
+      help,
+      helpClassName,
+      id,
+      inline,
+      success
     } = _ref,
     radioProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(CheckableInput, _extends({
+  var defaultInputId = useId();
+  var inputId = id || defaultInputId;
+  var validationId = useId();
+  var helpId = useId();
+  var hasError = !!error;
+  return /*#__PURE__*/React.createElement(Field, {
+    caution: caution,
+    className: classnames("p-radio-wrapper", className, {
+      "p-radio--inline": inline
+    }),
+    error: error,
+    forId: inputId,
+    help: help,
+    helpClassName: helpClassName,
+    helpId: helpId,
+    isTickElement: true,
+    success: success,
+    validationId: validationId,
+    inline: inline
+  }, /*#__PURE__*/React.createElement(CheckableInput, _extends({}, radioProps, {
+    "aria-describedby": help ? helpId : undefined,
+    "aria-errormessage": hasError ? validationId : undefined,
+    "aria-invalid": hasError,
+    id: inputId,
+    inline: inline,
     inputType: "radio",
     label: label
-  }, radioProps));
+  })));
+};
+RadioInput.propTypes = {
+  caution: _pt.node,
+  className: _pt.string,
+  error: _pt.node,
+  help: _pt.node,
+  helpClassName: _pt.string,
+  id: _pt.string,
+  inline: _pt.bool,
+  success: _pt.node,
+  wrapperClassName: _pt.string
 };
 export default RadioInput;

package/dist/esm/components/RadioInput/RadioInput.stories.d.ts

@@ -4,7 +4,11 @@ declare const meta: Meta<typeof RadioInput>;
 export default meta;
 type Story = StoryObj<typeof RadioInput>;
 export declare const Default: Story;
+export declare const Caution: Story;
 export declare const Children: Story;
 export declare const Disabled: Story;
-export declare const Required: Story;
+export declare const Error: Story;
+export declare const Help: Story;
 export declare const Inline: Story;
+export declare const Required: Story;
+export declare const Success: Story;

package/dist/esm/components/RadioInput/RadioInput.stories.js

@@ -41,6 +41,13 @@ export var Default = {
   }),
   name: "Default"
 };
+export var Caution = {
+  render: () => /*#__PURE__*/React.createElement(RadioInput, {
+    label: "Caution",
+    caution: "This is a caution message"
+  }),
+  name: "Caution"
+};
 export var Children = {
   render: () => /*#__PURE__*/React.createElement(RadioInput, {
     label: /*#__PURE__*/React.createElement(React.Fragment, null, "I agree to", /*#__PURE__*/React.createElement("a", {
@@ -58,6 +65,27 @@ export var Disabled = {
   }),
   name: "Disabled"
 };
+export var Error = {
+  render: () => /*#__PURE__*/React.createElement(RadioInput, {
+    label: "Error",
+    error: "This is an error message"
+  }),
+  name: "Error"
+};
+export var Help = {
+  render: () => /*#__PURE__*/React.createElement(RadioInput, {
+    label: "Help",
+    help: "This is a help message"
+  }),
+  name: "Help"
+};
+export var Inline = {
+  render: () => /*#__PURE__*/React.createElement(RadioInput, {
+    inline: true,
+    label: "Inline"
+  }),
+  name: "Inline"
+};
 export var Required = {
   render: () => /*#__PURE__*/React.createElement(RadioInput, {
     label: "Required",
@@ -66,11 +94,10 @@ export var Required = {
   }),
   name: "Required"
 };
-export var Inline = {
+export var Success = {
   render: () => /*#__PURE__*/React.createElement(RadioInput, {
-    label: "Inline",
-    name: "RadioInput",
-    inline: true
+    label: "Success",
+    success: "This is a success message"
   }),
-  name: "Inline"
+  name: "Success"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "4.6.0",
+  "version": "4.6.2",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {
@@ -96,7 +96,7 @@
     "tsc-alias": "1.8.10",
     "typescript": "5.7.3",
     "typescript-eslint": "8.24.1",
-    "vanilla-framework": "4.51.0",
+    "vanilla-framework": "4.52.0",
     "wait-on": "9.0.3",
     "webpack": "5.105.0"
   },