{
+ describe('N8nCheckbox', () => {
+ it('should render without label and child content', () => {
+ const { container } = render(N8nCheckbox);
+ expect(container).toMatchSnapshot();
+ });
+
+ it('should render with label', () => {
+ const { container } = render(N8nCheckbox, { props: { label: 'Checkbox' } });
+ expect(container).toMatchSnapshot();
+ });
+
+ it('should render with child', () => {
+ const { container } = render(N8nCheckbox, {
+ slots: { default: 'Bold text' },
+ });
+ expect(container).toMatchSnapshot();
+ });
+
+ it('should render with both child and label', () => {
+ const { container } = render(N8nCheckbox, {
+ props: { label: 'Checkbox' },
+ slots: { default: 'Bold text' },
+ });
+ expect(container).toMatchSnapshot();
+ });
+ });
+});
diff --git a/packages/design-system/src/components/N8nCheckbox/__tests__/__snapshots__/Checkbox.spec.ts.snap b/packages/design-system/src/components/N8nCheckbox/__tests__/__snapshots__/Checkbox.spec.ts.snap
new file mode 100644
index 0000000000..9a7a248acc
--- /dev/null
+++ b/packages/design-system/src/components/N8nCheckbox/__tests__/__snapshots__/Checkbox.spec.ts.snap
@@ -0,0 +1,158 @@
+// Vitest Snapshot v1
+
+exports[`components > N8nCheckbox > should render with both child and label 1`] = `
+
+
+
+`;
+
+exports[`components > N8nCheckbox > should render with child 1`] = `
+
+
+
+
+
+
+
+
+ Bold text
+
+
+
+
+
+
+`;
+
+exports[`components > N8nCheckbox > should render with label 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+ Checkbox
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`components > N8nCheckbox > should render without label and child content 1`] = `
+
+
+
+
+
+
+
+
+
+`;
diff --git a/packages/design-system/src/components/index.ts b/packages/design-system/src/components/index.ts
index 22683c0296..32fdfd9e0c 100644
--- a/packages/design-system/src/components/index.ts
+++ b/packages/design-system/src/components/index.ts
@@ -47,3 +47,4 @@ export { default as N8nUserSelect } from './N8nUserSelect';
export { default as N8nUsersList } from './N8nUsersList';
export { default as N8nResizeWrapper } from './N8nResizeWrapper';
export { default as N8nRecycleScroller } from './N8nRecycleScroller';
+export { default as N8nCheckbox } from './N8nCheckbox';
diff --git a/packages/design-system/src/plugin.ts b/packages/design-system/src/plugin.ts
index 0a9a470210..71d7ff4df7 100644
--- a/packages/design-system/src/plugin.ts
+++ b/packages/design-system/src/plugin.ts
@@ -50,6 +50,7 @@ import {
N8nUsersList,
N8nResizeWrapper,
N8nRecycleScroller,
+ N8nCheckbox,
} from './components';
export const N8nPlugin: PluginObject<{}> = {
@@ -103,5 +104,6 @@ export const N8nPlugin: PluginObject<{}> = {
app.component('n8n-user-select', N8nUserSelect);
app.component('n8n-resize-wrapper', N8nResizeWrapper);
app.component('n8n-recycle-scroller', N8nRecycleScroller);
+ app.component('n8n-checkbox', N8nCheckbox);
},
};