+);
+
+export type CheckboxFieldProps = ComponentProps<'div'> & {
+ /** Whether this component should be unstyled. */
+ unstyled?: undefined | boolean,
+
+ /** A label to be displayed after the checkbox. */
+ label: string,
+
+ /** An optional supporting copy to be displayed under the label. */
+ sublabel?: undefined | string,
+
+ /** An optional title. */
+ title?: undefined | string,
+
+ /** An optional tooltip to be displayed on an info icon next to the title. */
+ titleTooltip?: undefined | string,
+
+ /** Whether to display the optional observation on title. */
+ titleOptional?: undefined | boolean,
+
+ /** Whether the checkbox is checked by default. Passed down to Checkbox component. */
+ defaultChecked?: undefined | boolean,
+
+ /** Whether the checkbox is checked. Passed down to Checkbox component. */
+ checked?: undefined | boolean,
+
+ /** Whether the checkbox is disabled. Passed down to Checkbox component. */
+ disabled?: undefined | boolean,
+};
+
+/**
+ * A full-fledged Checkbox field, with optional label, title, icon etc.
+ */
+export const CheckboxField = (props: CheckboxFieldProps) => {
+ const {
+ unstyled = false,
+ label = '',
+ sublabel,
+ title,
+ titleOptional,
+ titleTooltip,
+ className,
+ } = props;
+
+ return (
+
+ {title && (
+
+ {title}
+
+ )}
+ {/* biome ignore lint/a11y/noLabelWithoutControl: the `` will resolve to an `` */}
+
+ {sublabel && (
+
{sublabel}
+ )}
+
+ );
+};
diff --git a/src/components/forms/fields/CheckboxGroup/CheckboxGroup.module.scss b/src/components/forms/fields/CheckboxGroup/CheckboxGroup.module.scss
new file mode 100644
index 0000000..34b03ca
--- /dev/null
+++ b/src/components/forms/fields/CheckboxGroup/CheckboxGroup.module.scss
@@ -0,0 +1,22 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@use '../../../../styling/defs.scss' as bk;
+
+@layer baklava.components {
+ .bk-checkbox-group {
+ @include bk.component-base(bk-checkbox-group);
+ display: flex;
+
+ &.bk-checkbox-group--vertical {
+ flex-direction: column;
+ row-gap: 20px;
+ }
+
+ &.bk-checkbox-group--horizontal {
+ flex-direction: row;
+ column-gap: bk.$spacing-7;
+ }
+ }
+}
diff --git a/src/components/forms/fields/CheckboxGroup/CheckboxGroup.stories.tsx b/src/components/forms/fields/CheckboxGroup/CheckboxGroup.stories.tsx
new file mode 100644
index 0000000..b332db5
--- /dev/null
+++ b/src/components/forms/fields/CheckboxGroup/CheckboxGroup.stories.tsx
@@ -0,0 +1,36 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { CheckboxGroup } from './CheckboxGroup.tsx';
+
+
+type CheckboxGroupArgs = React.ComponentProps;
+type Story = StoryObj;
+
+export default {
+ component: CheckboxGroup,
+ parameters: {
+ layout: 'centered',
+ },
+ tags: ['autodocs'],
+ argTypes: {
+ },
+ render: (args) =>
+
+
+
+ ,
+} satisfies Meta;
+
+export const CheckboxGroupVertical: Story = {};
+
+export const CheckboxGroupHorizontal: Story = {
+ args: {
+ direction: 'horizontal',
+ },
+};
diff --git a/src/components/forms/fields/CheckboxGroup/CheckboxGroup.tsx b/src/components/forms/fields/CheckboxGroup/CheckboxGroup.tsx
new file mode 100644
index 0000000..2396639
--- /dev/null
+++ b/src/components/forms/fields/CheckboxGroup/CheckboxGroup.tsx
@@ -0,0 +1,37 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { classNames as cx } from '../../../../util/componentUtil.ts';
+import * as React from 'react';
+
+import cl from './CheckboxGroup.module.scss';
+
+import { CheckboxField } from '../CheckboxField/CheckboxField.tsx';
+
+
+export { cl as CheckboxGroupClassNames };
+
+export type CheckboxGroupProps = React.PropsWithChildren<{
+ direction?: undefined | "vertical" | "horizontal";
+}>;
+
+/**
+ * Checkbox group component, wrapping multiple CheckboxField components vertically or horizontally.
+ */
+export const CheckboxGroup = Object.assign(
+ (props: CheckboxGroupProps) => {
+ const { children, direction = 'vertical' } = props;
+ return (
+