5391: validation on checkbox

Author: Sine Jespersen

src/stories/Library/Forms/checkbox/Checkbox.stories.tsx

@@ -12,6 +12,12 @@ export default {
         type: "text",
       },
     },
+    validation: {
+      control: {
+        type: "text",
+        defaultValue: "",
+      },
+    },
     // We disable the isChecked control, since it is not possible to
     // get the states from the React component to work with Storybook controls.
     isChecked: {
@@ -37,6 +43,7 @@ export const Unchecked = Template.bind({});
 Unchecked.args = {
   isChecked: false,
   label: "Toggle this checkbox",
+  validation: "Error error error",
 };
 
 // Show multiple checkboxes to make it easier to test keyboard navigation.

src/stories/Library/Forms/checkbox/Checkbox.tsx

@@ -4,6 +4,7 @@ export type CheckboxProps = {
   isChecked: boolean;
   label?: string;
   ariaLabel?: string;
+  validation?: string;
   callback?: (isChecked: boolean) => void;
 };
 
@@ -12,6 +13,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
   label,
   ariaLabel,
   callback,
+  validation,
 }) => {
   const checkboxId = useRef(`checkbox_id__${Math.random()}`);
   const [checked, setChecked] = useState(isChecked);
@@ -46,11 +48,18 @@ export const Checkbox: React.FC<CheckboxProps> = ({
             />
           </svg>
         </span>
-        {label && (
-          <span className="checkbox__text text-small-caption color-secondary-gray">
-            {label}
-          </span>
-        )}
+        <div>
+          {label && (
+            <span className="checkbox__text text-small-caption color-secondary-gray">
+              {label}
+            </span>
+          )}
+          {validation && (
+            <div className="checkbox__text text-small-caption checkbox__text--validation">
+              {validation}
+            </div>
+          )}
+        </div>
       </label>
     </div>
   );

src/stories/Library/Forms/checkbox/checkbox.scss

@@ -45,9 +45,13 @@
   transform: translate3d(0, 0, 0);
 }
 
-.checkbox__label .checkbox__text:last-child {
+.checkbox__label .checkbox__text {
   padding-left: 8px;
   line-height: 18px;
+
+  &--validation {
+    color: $c-signal-alert;
+  }
 }
 
 .checkbox__label:hover .checkbox__icon:first-child {