@instructure/ui-checkbox 9.8.1 → 9.9.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [9.9.0](https://github.com/instructure/instructure-ui/compare/v9.8.1...v9.9.0) (2024-11-12)
+
+
+### Features
+
+* **many:** backport new error messages from v10 ([9003d19](https://github.com/instructure/instructure-ui/commit/9003d19cc66022dfdeecc2e2c8c8d9d2a7300e3f))
+
+
+
+
+
 ## [9.8.1](https://github.com/instructure/instructure-ui/compare/v9.8.0...v9.8.1) (2024-10-28)
 
 **Note:** Version bump only for package @instructure/ui-checkbox

package/README.md

@@ -37,6 +37,6 @@ const MyCheckbox = () => {
 [npm]: https://img.shields.io/npm/v/@instructure/ui-checkbox.svg
 [npm-url]: https://npmjs.com/package/@instructure/ui-checkbox
 [license-badge]: https://img.shields.io/npm/l/instructure-ui.svg?style=flat-square
-[license]: https://github.com/instructure/instructure-ui/blob/master/LICENSE
+[license]: https://github.com/instructure/instructure-ui/blob/master/LICENSE.md
 [coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
 [coc]: https://github.com/instructure/instructure-ui/blob/master/CODE_OF_CONDUCT.md

package/es/Checkbox/CheckboxFacade/props.js

@@ -29,7 +29,8 @@ const propTypes = {
   focused: PropTypes.bool,
   hovered: PropTypes.bool,
   size: PropTypes.oneOf(['small', 'medium', 'large']),
-  indeterminate: PropTypes.bool
+  indeterminate: PropTypes.bool,
+  invalid: PropTypes.bool
 };
 const allowedProps = ['children', 'checked', 'focused', 'hovered', 'size', 'indeterminate'];
 export { propTypes, allowedProps };

package/es/Checkbox/CheckboxFacade/styles.js

@@ -37,7 +37,8 @@ const generateStyle = (componentTheme, props) => {
     checked = props.checked,
     focused = props.focused,
     hovered = props.hovered,
-    indeterminate = props.indeterminate;
+    indeterminate = props.indeterminate,
+    invalid = props.invalid;
   const isChecked = checked || indeterminate;
   const sizeVariants = {
     small: {
@@ -88,7 +89,7 @@ const generateStyle = (componentTheme, props) => {
       boxSizing: 'border-box',
       flexShrink: 0,
       transition: 'all 0.2s',
-      border: `${componentTheme.borderWidth} solid ${componentTheme.borderColor}`,
+      border: `${componentTheme.borderWidth} solid ${invalid ? componentTheme.errorBorderColor : componentTheme.borderColor}`,
       borderRadius: componentTheme.borderRadius,
       marginInlineEnd: componentTheme.marginRight,
       marginInlineStart: '0',

package/es/Checkbox/CheckboxFacade/theme.js

@@ -54,6 +54,7 @@ const generateComponentTheme = theme => {
     checkedBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest,
     checkedBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDarkest,
     hoverBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDarkest,
+    errorBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
     focusBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
     focusBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
     focusBorderStyle: borders === null || borders === void 0 ? void 0 : borders.style,

package/es/Checkbox/ToggleFacade/props.js

@@ -30,7 +30,8 @@ const propTypes = {
   readOnly: PropTypes.bool,
   focused: PropTypes.bool,
   size: PropTypes.oneOf(['small', 'medium', 'large']),
-  labelPlacement: PropTypes.oneOf(['top', 'start', 'end'])
+  labelPlacement: PropTypes.oneOf(['top', 'start', 'end']),
+  invalid: PropTypes.bool
 };
 const allowedProps = ['children', 'checked', 'disabled', 'readOnly', 'focused', 'size', 'labelPlacement'];
 export { propTypes, allowedProps };

package/es/Checkbox/ToggleFacade/styles.js

@@ -36,7 +36,8 @@ const generateStyle = (componentTheme, props) => {
   const size = props.size,
     checked = props.checked,
     focused = props.focused,
-    labelPlacement = props.labelPlacement;
+    labelPlacement = props.labelPlacement,
+    invalid = props.invalid;
   const labelPlacementVariants = {
     start: {
       facade: {
@@ -93,7 +94,7 @@ const generateStyle = (componentTheme, props) => {
       position: 'relative',
       borderRadius: '3rem',
       verticalAlign: 'middle',
-      boxShadow: `inset 0 0 0 ${componentTheme.borderWidth} ${componentTheme.borderColor}`,
+      boxShadow: `inset 0 0 0 ${componentTheme.borderWidth} ${invalid && !checked ? componentTheme.errorBorderColor : componentTheme.borderColor}`,
       height: componentTheme.toggleSize,
       width: `calc(${componentTheme.toggleSize} * 1.5)`,
       ...labelPlacementVariants[labelPlacement].facade,

package/es/Checkbox/ToggleFacade/theme.js

@@ -47,6 +47,7 @@ const generateComponentTheme = theme => {
   };
   const componentVariables = {
     color: colors === null || colors === void 0 ? void 0 : colors.textLightest,
+    errorBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
     background: colors === null || colors === void 0 ? void 0 : colors.backgroundLight,
     borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
     borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,

package/es/Checkbox/index.js

@@ -37,6 +37,7 @@ import { withStyle, jsx } from '@instructure/emotion';
 import { CheckboxFacade } from './CheckboxFacade';
 import { ToggleFacade } from './ToggleFacade';
 import generateStyle from './styles';
+import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
 /**
 ---
@@ -44,7 +45,7 @@ category: components
 tags: toggle, switch
 ---
 **/
-let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, null), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_Checkbox = class Checkbox extends Component {
+let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_Checkbox = class Checkbox extends Component {
   constructor(props) {
     super(props);
     this._defaultId = void 0;
@@ -132,6 +133,14 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, n
   get focused() {
     return isActiveElement(this._input);
   }
+  get isNewError() {
+    var _this$props$messages;
+    return !!((_this$props$messages = this.props.messages) !== null && _this$props$messages !== void 0 && _this$props$messages.find(m => m.type === 'newError'));
+  }
+  get invalid() {
+    var _this$props$messages2;
+    return !!((_this$props$messages2 = this.props.messages) !== null && _this$props$messages2 !== void 0 && _this$props$messages2.find(m => m.type === 'newError' || m.type === 'error'));
+  }
   focus() {
     this._input && this._input.focus();
   }
@@ -144,7 +153,9 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, n
       readOnly = _this$props4.readOnly,
       indeterminate = _this$props4.indeterminate,
       labelPlacement = _this$props4.labelPlacement,
-      themeOverride = _this$props4.themeOverride;
+      themeOverride = _this$props4.themeOverride,
+      isRequired = _this$props4.isRequired,
+      styles = _this$props4.styles;
     const _this$state = this.state,
       hovered = _this$state.hovered,
       focused = _this$state.focused;
@@ -157,8 +168,11 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, n
         checked: this.checked,
         readOnly: readOnly,
         labelPlacement: labelPlacement,
-        themeOverride: themeOverride
-      }, label);
+        themeOverride: themeOverride,
+        invalid: this.invalid
+      }, label, isRequired && jsx("span", {
+        css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {}
+      }, " *"));
     } else {
       return jsx(CheckboxFacade, {
         size: size,
@@ -166,42 +180,51 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, n
         focused: focused,
         checked: this.checked,
         indeterminate: indeterminate,
-        themeOverride: themeOverride
-      }, label);
+        themeOverride: themeOverride,
+        invalid: this.invalid
+      }, label, isRequired && jsx("span", {
+        css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {}
+      }, " *"));
     }
   }
   renderMessages() {
-    const messages = this.props.messages;
+    const _this$props5 = this.props,
+      messages = _this$props5.messages,
+      styles = _this$props5.styles,
+      variant = _this$props5.variant;
     return messages && messages.length > 0 ? jsx(View, {
       display: "block",
-      margin: "small 0 0"
+      margin: "small 0 0",
+      css: this.isNewError && (variant === 'toggle' ? styles === null || styles === void 0 ? void 0 : styles.indentedToggleError : styles === null || styles === void 0 ? void 0 : styles.indentedError)
     }, jsx(FormFieldMessages, {
       messages: messages
     })) : null;
   }
   render() {
-    const _this$props5 = this.props,
-      disabled = _this$props5.disabled,
-      readOnly = _this$props5.readOnly,
-      value = _this$props5.value,
-      onKeyDown = _this$props5.onKeyDown,
-      onFocus = _this$props5.onFocus,
-      onBlur = _this$props5.onBlur,
-      onMouseOver = _this$props5.onMouseOver,
-      onMouseOut = _this$props5.onMouseOut,
-      indeterminate = _this$props5.indeterminate,
-      variant = _this$props5.variant,
-      styles = _this$props5.styles;
+    const _this$props6 = this.props,
+      disabled = _this$props6.disabled,
+      readOnly = _this$props6.readOnly,
+      value = _this$props6.value,
+      onKeyDown = _this$props6.onKeyDown,
+      onFocus = _this$props6.onFocus,
+      onBlur = _this$props6.onBlur,
+      onMouseOver = _this$props6.onMouseOver,
+      onMouseOut = _this$props6.onMouseOut,
+      indeterminate = _this$props6.indeterminate,
+      variant = _this$props6.variant,
+      styles = _this$props6.styles,
+      isRequired = _this$props6.isRequired;
     const props = omitProps(this.props, Checkbox.allowedProps);
     error(!(variant === 'toggle' && indeterminate), `[Checkbox] The \`toggle\` variant does not support the \`indeterminate\` property. Use the \`simple\` variant instead.`);
-
-    /* eslint-disable jsx-a11y/mouse-events-have-key-events */
-
     return jsx("div", {
-      css: styles === null || styles === void 0 ? void 0 : styles.checkbox,
-      onMouseOver: createChainedFunction(onMouseOver, this.handleMouseOver),
+      css: styles === null || styles === void 0 ? void 0 : styles.checkbox
+      /* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */,
+      onMouseOver: createChainedFunction(onMouseOver, this.handleMouseOver)
+      /* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */,
       onMouseOut: createChainedFunction(onMouseOut, this.handleMouseOut),
       ref: this.handleRef
+    }, jsx("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.container
     }, jsx("input", Object.assign({}, props, {
       id: this.id,
       value: value,
@@ -209,6 +232,7 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, n
       ref: c => {
         this._input = c;
       },
+      required: isRequired,
       disabled: disabled || readOnly,
       "aria-checked": indeterminate ? 'mixed' : void 0,
       css: styles === null || styles === void 0 ? void 0 : styles.input,
@@ -220,9 +244,7 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, n
     })), jsx("label", {
       htmlFor: this.id,
       css: styles === null || styles === void 0 ? void 0 : styles.control
-    }, this.renderFacade(), this.renderMessages()));
-
-    /* eslint-enable jsx-a11y/mouse-events-have-key-events */
+    }, this.renderFacade(), this.renderMessages())));
   }
 }, _Checkbox.displayName = "Checkbox", _Checkbox.componentId = 'Checkbox', _Checkbox.propTypes = propTypes, _Checkbox.allowedProps = allowedProps, _Checkbox.defaultProps = {
   size: 'medium',

package/es/Checkbox/props.js

@@ -44,7 +44,8 @@ const propTypes = {
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   variant: PropTypes.oneOf(['simple', 'toggle']),
   inline: PropTypes.bool,
-  labelPlacement: PropTypes.oneOf(['top', 'start', 'end'])
+  labelPlacement: PropTypes.oneOf(['top', 'start', 'end']),
+  isRequired: PropTypes.bool
 };
 const allowedProps = ['label', 'id', 'value', 'messages', 'defaultChecked', 'checked', 'onChange', 'onKeyDown', 'onFocus', 'onBlur', 'onMouseOver', 'onMouseOut', 'disabled', 'readOnly', 'indeterminate', 'size', 'variant', 'inline', 'labelPlacement'];
 export { propTypes, allowedProps };

package/es/Checkbox/styles.js

@@ -32,10 +32,19 @@
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = (_componentTheme, props) => {
+const generateStyle = (componentTheme, props) => {
   const inline = props.inline,
     disabled = props.disabled;
   return {
+    requiredInvalid: {
+      color: componentTheme.requiredInvalidColor
+    },
+    indentedError: {
+      paddingLeft: componentTheme.checkErrorInsetWidth
+    },
+    indentedToggleError: {
+      paddingLeft: componentTheme.toggleErrorInsetWidth
+    },
     checkbox: {
       label: 'checkbox',
       position: 'relative',
@@ -51,6 +60,10 @@ const generateStyle = (_componentTheme, props) => {
         width: 'auto'
       })
     },
+    // this container is added to reduce the clickable area of the checkbox to the actual checkbox and label
+    container: {
+      width: 'fit-content'
+    },
     input: {
       label: 'checkbox__input',
       padding: 0,

package/es/Checkbox/theme.js

@@ -0,0 +1,43 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * Generates the theme object for the component from the theme and provided additional information
+ * @param  {Object} theme The actual theme object.
+ * @return {Object} The final theme object with the overrides and component variables
+ */
+const generateComponentTheme = theme => {
+  const colors = theme.colors,
+    forms = theme.forms,
+    spacing = theme.spacing;
+  const componentVariables = {
+    requiredInvalidColor: colors === null || colors === void 0 ? void 0 : colors.textDanger,
+    toggleErrorInsetWidth: `calc(${forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall}*1.5 + ${spacing === null || spacing === void 0 ? void 0 : spacing.small})`,
+    checkErrorInsetWidth: `calc(1.25em + ${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall})`
+  };
+  return {
+    ...componentVariables
+  };
+};
+export default generateComponentTheme;

package/lib/Checkbox/CheckboxFacade/props.js

@@ -36,6 +36,7 @@ const propTypes = exports.propTypes = {
   focused: _propTypes.default.bool,
   hovered: _propTypes.default.bool,
   size: _propTypes.default.oneOf(['small', 'medium', 'large']),
-  indeterminate: _propTypes.default.bool
+  indeterminate: _propTypes.default.bool,
+  invalid: _propTypes.default.bool
 };
 const allowedProps = exports.allowedProps = ['children', 'checked', 'focused', 'hovered', 'size', 'indeterminate'];

package/lib/Checkbox/CheckboxFacade/styles.js

@@ -43,7 +43,8 @@ const generateStyle = (componentTheme, props) => {
     checked = props.checked,
     focused = props.focused,
     hovered = props.hovered,
-    indeterminate = props.indeterminate;
+    indeterminate = props.indeterminate,
+    invalid = props.invalid;
   const isChecked = checked || indeterminate;
   const sizeVariants = {
     small: {
@@ -94,7 +95,7 @@ const generateStyle = (componentTheme, props) => {
       boxSizing: 'border-box',
       flexShrink: 0,
       transition: 'all 0.2s',
-      border: `${componentTheme.borderWidth} solid ${componentTheme.borderColor}`,
+      border: `${componentTheme.borderWidth} solid ${invalid ? componentTheme.errorBorderColor : componentTheme.borderColor}`,
       borderRadius: componentTheme.borderRadius,
       marginInlineEnd: componentTheme.marginRight,
       marginInlineStart: '0',

package/lib/Checkbox/CheckboxFacade/theme.js

@@ -60,6 +60,7 @@ const generateComponentTheme = theme => {
     checkedBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest,
     checkedBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDarkest,
     hoverBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDarkest,
+    errorBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
     focusBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
     focusBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
     focusBorderStyle: borders === null || borders === void 0 ? void 0 : borders.style,

package/lib/Checkbox/ToggleFacade/props.js

@@ -37,6 +37,7 @@ const propTypes = exports.propTypes = {
   readOnly: _propTypes.default.bool,
   focused: _propTypes.default.bool,
   size: _propTypes.default.oneOf(['small', 'medium', 'large']),
-  labelPlacement: _propTypes.default.oneOf(['top', 'start', 'end'])
+  labelPlacement: _propTypes.default.oneOf(['top', 'start', 'end']),
+  invalid: _propTypes.default.bool
 };
 const allowedProps = exports.allowedProps = ['children', 'checked', 'disabled', 'readOnly', 'focused', 'size', 'labelPlacement'];

package/lib/Checkbox/ToggleFacade/styles.js

@@ -42,7 +42,8 @@ const generateStyle = (componentTheme, props) => {
   const size = props.size,
     checked = props.checked,
     focused = props.focused,
-    labelPlacement = props.labelPlacement;
+    labelPlacement = props.labelPlacement,
+    invalid = props.invalid;
   const labelPlacementVariants = {
     start: {
       facade: {
@@ -99,7 +100,7 @@ const generateStyle = (componentTheme, props) => {
       position: 'relative',
       borderRadius: '3rem',
       verticalAlign: 'middle',
-      boxShadow: `inset 0 0 0 ${componentTheme.borderWidth} ${componentTheme.borderColor}`,
+      boxShadow: `inset 0 0 0 ${componentTheme.borderWidth} ${invalid && !checked ? componentTheme.errorBorderColor : componentTheme.borderColor}`,
       height: componentTheme.toggleSize,
       width: `calc(${componentTheme.toggleSize} * 1.5)`,
       ...labelPlacementVariants[labelPlacement].facade,

package/lib/Checkbox/ToggleFacade/theme.js

@@ -53,6 +53,7 @@ const generateComponentTheme = theme => {
   };
   const componentVariables = {
     color: colors === null || colors === void 0 ? void 0 : colors.textLightest,
+    errorBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
     background: colors === null || colors === void 0 ? void 0 : colors.backgroundLight,
     borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
     borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,

package/lib/Checkbox/index.js

@@ -33,6 +33,7 @@ var _emotion = require("@instructure/emotion");
 var _CheckboxFacade = require("./CheckboxFacade");
 var _ToggleFacade = require("./ToggleFacade");
 var _styles = _interopRequireDefault(require("./styles"));
+var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
 var _dec, _dec2, _dec3, _class, _Checkbox;
 /*
@@ -65,7 +66,7 @@ category: components
 tags: toggle, switch
 ---
 **/
-let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, null), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_Checkbox = class Checkbox extends _react.Component {
+let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_Checkbox = class Checkbox extends _react.Component {
   constructor(props) {
     super(props);
     this._defaultId = void 0;
@@ -153,6 +154,14 @@ let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDetermini
   get focused() {
     return (0, _isActiveElement.isActiveElement)(this._input);
   }
+  get isNewError() {
+    var _this$props$messages;
+    return !!((_this$props$messages = this.props.messages) !== null && _this$props$messages !== void 0 && _this$props$messages.find(m => m.type === 'newError'));
+  }
+  get invalid() {
+    var _this$props$messages2;
+    return !!((_this$props$messages2 = this.props.messages) !== null && _this$props$messages2 !== void 0 && _this$props$messages2.find(m => m.type === 'newError' || m.type === 'error'));
+  }
   focus() {
     this._input && this._input.focus();
   }
@@ -165,7 +174,9 @@ let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDetermini
       readOnly = _this$props4.readOnly,
       indeterminate = _this$props4.indeterminate,
       labelPlacement = _this$props4.labelPlacement,
-      themeOverride = _this$props4.themeOverride;
+      themeOverride = _this$props4.themeOverride,
+      isRequired = _this$props4.isRequired,
+      styles = _this$props4.styles;
     const _this$state = this.state,
       hovered = _this$state.hovered,
       focused = _this$state.focused;
@@ -178,8 +189,11 @@ let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDetermini
         checked: this.checked,
         readOnly: readOnly,
         labelPlacement: labelPlacement,
-        themeOverride: themeOverride
-      }, label);
+        themeOverride: themeOverride,
+        invalid: this.invalid
+      }, label, isRequired && (0, _emotion.jsx)("span", {
+        css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {}
+      }, " *"));
     } else {
       return (0, _emotion.jsx)(_CheckboxFacade.CheckboxFacade, {
         size: size,
@@ -187,42 +201,51 @@ let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDetermini
         focused: focused,
         checked: this.checked,
         indeterminate: indeterminate,
-        themeOverride: themeOverride
-      }, label);
+        themeOverride: themeOverride,
+        invalid: this.invalid
+      }, label, isRequired && (0, _emotion.jsx)("span", {
+        css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {}
+      }, " *"));
     }
   }
   renderMessages() {
-    const messages = this.props.messages;
+    const _this$props5 = this.props,
+      messages = _this$props5.messages,
+      styles = _this$props5.styles,
+      variant = _this$props5.variant;
     return messages && messages.length > 0 ? (0, _emotion.jsx)(_View.View, {
       display: "block",
-      margin: "small 0 0"
+      margin: "small 0 0",
+      css: this.isNewError && (variant === 'toggle' ? styles === null || styles === void 0 ? void 0 : styles.indentedToggleError : styles === null || styles === void 0 ? void 0 : styles.indentedError)
     }, (0, _emotion.jsx)(_FormFieldMessages.FormFieldMessages, {
       messages: messages
     })) : null;
   }
   render() {
-    const _this$props5 = this.props,
-      disabled = _this$props5.disabled,
-      readOnly = _this$props5.readOnly,
-      value = _this$props5.value,
-      onKeyDown = _this$props5.onKeyDown,
-      onFocus = _this$props5.onFocus,
-      onBlur = _this$props5.onBlur,
-      onMouseOver = _this$props5.onMouseOver,
-      onMouseOut = _this$props5.onMouseOut,
-      indeterminate = _this$props5.indeterminate,
-      variant = _this$props5.variant,
-      styles = _this$props5.styles;
+    const _this$props6 = this.props,
+      disabled = _this$props6.disabled,
+      readOnly = _this$props6.readOnly,
+      value = _this$props6.value,
+      onKeyDown = _this$props6.onKeyDown,
+      onFocus = _this$props6.onFocus,
+      onBlur = _this$props6.onBlur,
+      onMouseOver = _this$props6.onMouseOver,
+      onMouseOut = _this$props6.onMouseOut,
+      indeterminate = _this$props6.indeterminate,
+      variant = _this$props6.variant,
+      styles = _this$props6.styles,
+      isRequired = _this$props6.isRequired;
     const props = (0, _omitProps.omitProps)(this.props, Checkbox.allowedProps);
     (0, _console.logError)(!(variant === 'toggle' && indeterminate), `[Checkbox] The \`toggle\` variant does not support the \`indeterminate\` property. Use the \`simple\` variant instead.`);
-
-    /* eslint-disable jsx-a11y/mouse-events-have-key-events */
-
     return (0, _emotion.jsx)("div", {
-      css: styles === null || styles === void 0 ? void 0 : styles.checkbox,
-      onMouseOver: (0, _createChainedFunction.createChainedFunction)(onMouseOver, this.handleMouseOver),
+      css: styles === null || styles === void 0 ? void 0 : styles.checkbox
+      /* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */,
+      onMouseOver: (0, _createChainedFunction.createChainedFunction)(onMouseOver, this.handleMouseOver)
+      /* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */,
       onMouseOut: (0, _createChainedFunction.createChainedFunction)(onMouseOut, this.handleMouseOut),
       ref: this.handleRef
+    }, (0, _emotion.jsx)("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.container
     }, (0, _emotion.jsx)("input", Object.assign({}, props, {
       id: this.id,
       value: value,
@@ -230,6 +253,7 @@ let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDetermini
       ref: c => {
         this._input = c;
       },
+      required: isRequired,
       disabled: disabled || readOnly,
       "aria-checked": indeterminate ? 'mixed' : void 0,
       css: styles === null || styles === void 0 ? void 0 : styles.input,
@@ -241,9 +265,7 @@ let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDetermini
     })), (0, _emotion.jsx)("label", {
       htmlFor: this.id,
       css: styles === null || styles === void 0 ? void 0 : styles.control
-    }, this.renderFacade(), this.renderMessages()));
-
-    /* eslint-enable jsx-a11y/mouse-events-have-key-events */
+    }, this.renderFacade(), this.renderMessages())));
   }
 }, _Checkbox.displayName = "Checkbox", _Checkbox.componentId = 'Checkbox', _Checkbox.propTypes = _props.propTypes, _Checkbox.allowedProps = _props.allowedProps, _Checkbox.defaultProps = {
   size: 'medium',

package/lib/Checkbox/props.js

@@ -51,6 +51,7 @@ const propTypes = exports.propTypes = {
   size: _propTypes.default.oneOf(['small', 'medium', 'large']),
   variant: _propTypes.default.oneOf(['simple', 'toggle']),
   inline: _propTypes.default.bool,
-  labelPlacement: _propTypes.default.oneOf(['top', 'start', 'end'])
+  labelPlacement: _propTypes.default.oneOf(['top', 'start', 'end']),
+  isRequired: _propTypes.default.bool
 };
 const allowedProps = exports.allowedProps = ['label', 'id', 'value', 'messages', 'defaultChecked', 'checked', 'onChange', 'onKeyDown', 'onFocus', 'onBlur', 'onMouseOver', 'onMouseOut', 'disabled', 'readOnly', 'indeterminate', 'size', 'variant', 'inline', 'labelPlacement'];

package/lib/Checkbox/styles.js

@@ -38,10 +38,19 @@ exports.default = void 0;
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = (_componentTheme, props) => {
+const generateStyle = (componentTheme, props) => {
   const inline = props.inline,
     disabled = props.disabled;
   return {
+    requiredInvalid: {
+      color: componentTheme.requiredInvalidColor
+    },
+    indentedError: {
+      paddingLeft: componentTheme.checkErrorInsetWidth
+    },
+    indentedToggleError: {
+      paddingLeft: componentTheme.toggleErrorInsetWidth
+    },
     checkbox: {
       label: 'checkbox',
       position: 'relative',
@@ -57,6 +66,10 @@ const generateStyle = (_componentTheme, props) => {
         width: 'auto'
       })
     },
+    // this container is added to reduce the clickable area of the checkbox to the actual checkbox and label
+    container: {
+      width: 'fit-content'
+    },
     input: {
       label: 'checkbox__input',
       padding: 0,