@scm-manager/ui-core 3.0.0-20240024-101702

package/src/base/forms/FormPathContext.tsx

@@ -0,0 +1,73 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * 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.
+ */
+
+import React, { FC, useContext, useMemo } from "react";
+
+const ScmFormPathContext = React.createContext<string>("");
+
+export function useScmFormPathContext() {
+  return useContext(ScmFormPathContext);
+}
+
+export const ScmFormPathContextProvider: FC<{ path: string }> = ({ children, path }) => (
+  <ScmFormPathContext.Provider value={path}>{children}</ScmFormPathContext.Provider>
+);
+
+/**
+ * This component removes redundancy by declaring a prefix that is shared by all enclosed form-related components.
+ * It might be helpful when the data structure of a list's items does not correspond with the individual list item's
+ * form structure.
+ *
+ * @beta
+ * @since 2.43.0
+ * @example ```
+ * // For data of structure
+ *    {
+ *       subForm: { foo: boolean, bar: string };
+ *       flag: boolean;
+ *       tag: string;
+ *    }
+ * // Because we use ConfigurationForm we get and update the whole object.
+ * // We only want to create a form for 'subForm' without having to repeat it for every subField
+ * // while keeping the original data structure for the whole form. *
+ *
+ * // Using this component we can write:
+ * <Form.PathContext path="subForm">
+ *   <Form.Input name="foo" />
+ *   <Form.Checkbox name="bar" />
+ * </Form.PathContext>
+ *
+ * // Instead of
+ *
+ * <Form.Input name="subForm.foo" />
+ * <Form.Checkbox name="subForm.bar" />
+ *
+ * // This pattern becomes useful in complex or large forms.
+ * ```
+ */
+export const ScmNestedFormPathContextProvider: FC<{ path: string }> = ({ children, path }) => {
+  const prefix = useScmFormPathContext();
+  const pathWithPrefix = useMemo(() => (prefix ? `${prefix}.${path}` : path), [path, prefix]);
+  return <ScmFormPathContext.Provider value={pathWithPrefix}>{children}</ScmFormPathContext.Provider>;
+};

package/src/base/forms/FormRow.tsx

@@ -0,0 +1,37 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * 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.
+ */
+
+import React, { HTMLProps } from "react";
+import classNames from "classnames";
+
+const FormRow = React.forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(
+  ({ className, children, hidden, ...rest }, ref) =>
+    hidden ? null : (
+      <div ref={ref} className={classNames("columns", className)} {...rest}>
+        {children}
+      </div>
+    )
+);
+
+export default FormRow;

package/src/base/forms/ScmFormContext.tsx

@@ -0,0 +1,43 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * 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.
+ */
+
+import React, { PropsWithChildren, useContext } from "react";
+import { UseFormReturn } from "react-hook-form";
+import type { TFunction } from "i18next";
+
+type ContextType<T = any> = UseFormReturn<T> & {
+  t: TFunction;
+  readOnly?: boolean;
+  formId: string;
+};
+
+const ScmFormContext = React.createContext<ContextType>(null as unknown as ContextType);
+
+export function ScmFormContextProvider<T>({ children, ...props }: PropsWithChildren<ContextType<T>>) {
+  return <ScmFormContext.Provider value={props}>{children}</ScmFormContext.Provider>;
+}
+
+export function useScmFormContext() {
+  return useContext(ScmFormContext);
+}

package/src/base/forms/ScmFormListContext.tsx

@@ -0,0 +1,65 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * 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.
+ */
+
+import React, { FC, useContext, useMemo } from "react";
+import { FieldValues, useFieldArray, UseFieldArrayReturn } from "react-hook-form";
+import { ScmFormPathContextProvider, useScmFormPathContext } from "./FormPathContext";
+import { useScmFormContext } from "./ScmFormContext";
+
+type ContextType<T extends FieldValues = any> = UseFieldArrayReturn<T> & { isNested: boolean };
+
+const ScmFormListContext = React.createContext<ContextType>(null as unknown as ContextType);
+
+type Props = {
+  name: string;
+};
+
+/**
+ * Sets up an array field to be displayed in an enclosed *Form.Table* or *Form.List*.
+ * A *Form.AddListEntryForm* can be used to implement a sub-form for adding new entries to the list.
+ *
+ * @beta
+ * @since 2.43.0
+ */
+export const ScmFormListContextProvider: FC<Props> = ({ name, children }) => {
+  const { control } = useScmFormContext();
+  const prefix = useScmFormPathContext();
+  const parentForm = useScmFormListContext();
+  const nameWithPrefix = useMemo(() => (prefix ? `${prefix}.${name}` : name), [name, prefix]);
+  const fieldArray = useFieldArray({
+    control,
+    name: nameWithPrefix,
+  });
+  const value = useMemo(() => ({ ...fieldArray, isNested: !!parentForm }), [fieldArray, parentForm]);
+
+  return (
+    <ScmFormPathContextProvider path={nameWithPrefix}>
+      <ScmFormListContext.Provider value={value}>{children}</ScmFormListContext.Provider>
+    </ScmFormPathContextProvider>
+  );
+};
+
+export function useScmFormListContext() {
+  return useContext(ScmFormListContext);
+}

package/src/base/forms/base/Control.tsx

@@ -0,0 +1,34 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * 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.
+ */
+
+import React, { HTMLProps } from "react";
+import classNames from "classnames";
+
+const Control = React.forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(({ className, children, ...rest }, ref) => (
+  <div className={classNames("control", className)} {...rest} ref={ref}>
+    {children}
+  </div>
+));
+
+export default Control;

package/src/base/forms/base/Field.tsx

@@ -0,0 +1,35 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * 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.
+ */
+
+import React, { FC, HTMLProps } from "react";
+import classNames from "classnames";
+
+const Field: FC<HTMLProps<HTMLDivElement> | ({ as: keyof JSX.IntrinsicElements } & HTMLProps<HTMLElement>)> = ({
+  as = "div",
+  className,
+  children,
+  ...rest
+}) => React.createElement(as, { className: classNames("field", className), ...rest }, children);
+
+export default Field;

package/src/base/forms/base/field-message/FieldMessage.tsx

@@ -0,0 +1,34 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * 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.
+ */
+
+import React, { ReactNode } from "react";
+import classNames from "classnames";
+import { createVariantClass, Variant } from "../../variants";
+
+type Props = { variant?: Variant; className?: string; children?: ReactNode };
+
+const FieldMessage = ({ variant, className, children }: Props) => (
+  <p className={classNames("help", createVariantClass(variant), className)}>{children}</p>
+);
+export default FieldMessage;

package/src/base/forms/base/help/Help.tsx

@@ -0,0 +1,34 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * 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.
+ */
+
+import React from "react";
+import { Tooltip } from "../../../overlays";
+
+type Props = { text?: string; className?: string };
+const Help = ({ text, className }: Props) => (
+  <Tooltip className={className} message={text}>
+    <i className="fas fa-fw fa-question-circle has-text-blue-light" aria-hidden />
+  </Tooltip>
+);
+export default Help;

package/src/base/forms/base/label/Label.tsx

@@ -0,0 +1,35 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * 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.
+ */
+
+import React, { FC, HTMLProps } from "react";
+import classNames from "classnames";
+
+const Label: FC<HTMLProps<HTMLLabelElement> | ({ as: keyof JSX.IntrinsicElements } & HTMLProps<HTMLElement>)> = ({
+  as = "label",
+  className,
+  children,
+  ...rest
+}) => React.createElement(as, { className: classNames("label", className), ...rest }, children);
+
+export default Label;

package/src/base/forms/checkbox/Checkbox.stories.mdx

@@ -0,0 +1,26 @@
+import {Meta, Story} from "@storybook/addon-docs";
+import Checkbox from "./Checkbox";
+
+<Meta
+  title="Checkbox"
+/>
+
+<Story name="Default">
+  <Checkbox name="name"/>
+</Story>
+
+<Story name="WithHardcodedText">
+  <Checkbox name="name" label="Name" helpText="A help text"/>
+</Story>
+
+<Story name="WithStyling">
+  <Checkbox name="name" className="has-background-blue-light"/>
+</Story>
+
+<Story name="WithInitialFocus">
+  <Checkbox name="name" autoFocus/>
+</Story>
+
+<Story name="Readonly">
+  <Checkbox name="name" checked readOnly/>
+</Story>

package/src/base/forms/checkbox/Checkbox.tsx

@@ -0,0 +1,118 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * 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.
+ */
+
+import React, { InputHTMLAttributes } from "react";
+import { createAttributesForTesting } from "../../helpers";
+import Help from "../base/help/Help";
+import styled from "styled-components";
+import classNames from "classnames";
+
+const StyledInput = styled.input`
+  height: 1rem;
+  width: 1rem;
+`;
+
+const StyledLabel = styled.label`
+  margin-left: -0.75rem;
+  display: inline-flex;
+`;
+
+type InputFieldProps = {
+  label: string;
+  helpText?: string;
+  testId?: string;
+  labelClassName?: string;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "type">;
+
+/**
+ * @see https://bulma.io/documentation/form/checkbox/
+ */
+const Checkbox = React.forwardRef<HTMLInputElement, InputFieldProps>(
+  (
+    {
+      readOnly,
+      label,
+      className,
+      labelClassName,
+      value,
+      name,
+      checked,
+      defaultChecked,
+      defaultValue,
+      testId,
+      helpText,
+      ...props
+    },
+    ref
+  ) => (
+    <StyledLabel
+      className={classNames("checkbox is-align-items-center", labelClassName)}
+      // @ts-ignore bulma uses the disabled attribute on labels, although it is not part of the html spec
+      disabled={readOnly || props.disabled}
+    >
+      {readOnly ? (
+        <>
+          <input
+            type="hidden"
+            name={name}
+            value={value}
+            defaultValue={defaultValue}
+            checked={checked}
+            defaultChecked={defaultChecked}
+            readOnly
+          />
+          <StyledInput
+            type="checkbox"
+            className={classNames("m-3", className)}
+            ref={ref}
+            value={value}
+            defaultValue={defaultValue}
+            checked={checked}
+            defaultChecked={defaultChecked}
+            {...props}
+            {...createAttributesForTesting(testId)}
+            disabled
+          />
+        </>
+      ) : (
+        <StyledInput
+          type="checkbox"
+          className={classNames("m-3", className)}
+          ref={ref}
+          name={name}
+          value={value}
+          defaultValue={defaultValue}
+          checked={checked}
+          defaultChecked={defaultChecked}
+          {...props}
+          {...createAttributesForTesting(testId)}
+        />
+      )}
+
+      {label}
+      {helpText ? <Help className="ml-1" text={helpText} /> : null}
+    </StyledLabel>
+  )
+);
+export default Checkbox;

package/src/base/forms/checkbox/CheckboxField.tsx

@@ -0,0 +1,39 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * 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.
+ */
+
+import React from "react";
+import Field from "../base/Field";
+import Control from "../base/Control";
+import Checkbox from "./Checkbox";
+
+type Props = React.ComponentProps<typeof Checkbox>;
+
+const CheckboxField = React.forwardRef<HTMLInputElement, Props>(({ className, ...props }, ref) => (
+  <Field className={className}>
+    <Control>
+      <Checkbox ref={ref} {...props} />
+    </Control>
+  </Field>
+));
+export default CheckboxField;

package/src/base/forms/checkbox/ControlledCheckboxField.stories.mdx

@@ -0,0 +1,36 @@
+import { Meta, Story } from "@storybook/addon-docs";
+import Form from "../Form";
+import ControlledCheckboxField from "./ControlledCheckboxField";
+
+<Meta
+  title="ControlledCheckboxField"
+  decorators={[
+    (Story) => (
+      <Form onSubmit={console.log} defaultValues={{ checkOne: false, checkTwo: true, checkThree: false }} translationPath={["sample", "form"]}>
+        <Story />
+      </Form>
+    ),
+  ]}
+/>
+
+<Story name="Default">
+  <ControlledCheckboxField name="checkOne" />
+</Story>
+
+<Story name="WithHardcodedText">
+  <ControlledCheckboxField name="checkOne" label="Name" helpText="A help text" />
+</Story>
+
+<Story name="WithStyling">
+  <ControlledCheckboxField name="checkOne" className="has-background-blue-light" />
+</Story>
+
+<Story name="WithInitialFocus">
+  <ControlledCheckboxField name="checkOne" autoFocus={true} />
+</Story>
+
+<Story name="WithReadonly">
+  <ControlledCheckboxField name="checkOne" readOnly />
+  <ControlledCheckboxField name="checkTwo" disabled />
+  <ControlledCheckboxField name="checkThree" />
+</Story>