feat: Checkbox component

packages/snaps-sdk/src/jsx/components/form/Checkbox.ts

@@ -0,0 +1,37 @@
+import { createSnapComponent } from '../../component';
+
+/**
+ * The props of the {@link Checkbox} component.
+ *
+ * @property name - The name of the input field. This is used to identify the
+ * input field in the form data.
+ * @property type - The type of the input field. Defaults to `text`.
+ * @property value - The value of the input field.
+ * @property placeholder - The placeholder text of the input field.
+ */
+export type CheckboxProps = {
+  name: string;
+  value?: boolean | undefined;
+};
+
+const TYPE = 'Checkbox';
+
+/**
+ * A checkbox component, which is used to create a checkbox.
+ *
+ * @param props - The props of the component.
+ * @param props.name - The name of the checkboxd. This is used to identify the
+ * state in the form data.
+ * @param props.value - The value of the input field.
+ * @returns An input element.
+ * @example
+ * <Checkbox name="accept-terms" />
+ */
+export const Checkbox = createSnapComponent<CheckboxProps, typeof TYPE>(TYPE);
+
+/**
+ * A checkbox element.
+ *
+ * @see Checkbox
+ */
+export type CheckboxElement = ReturnType<typeof Checkbox>;

packages/snaps-sdk/src/jsx/components/form/index.ts

@@ -1,4 +1,5 @@
 import type { ButtonElement } from './Button';
+import type { CheckboxElement } from './Checkbox';
 import type { DropdownElement } from './Dropdown';
 import type { FieldElement } from './Field';
 import type { FileInputElement } from './FileInput';
@@ -7,6 +8,7 @@ import type { InputElement } from './Input';
 import type { OptionElement } from './Option';
 
 export * from './Button';
+export * from './Checkbox';
 export * from './Dropdown';
 export * from './Option';
 export * from './Field';
@@ -16,6 +18,7 @@ export * from './Input';
 
 export type StandardFormElement =
   | ButtonElement
+  | CheckboxElement
   | FormElement
   | FieldElement
   | FileInputElement

packages/snaps-sdk/src/jsx/validation.test.tsx

@@ -22,13 +22,15 @@ import {
   Tooltip,
   Value,
   FileInput,
+  Checkbox,
 } from './components';
 import {
   AddressStruct,
   assertJSXElement,
   BoldStruct,
   BoxStruct,
   ButtonStruct,
+  CheckboxStruct,
   CopyableStruct,
   DividerStruct,
   DropdownStruct,
@@ -466,6 +468,35 @@ describe('BoxStruct', () => {
   });
 });
 
+describe('CheckboxStruct', () => {
+  it.each([<Checkbox name="foo" />])(
+    'validates a dropdown element',
+    (value) => {
+      expect(is(value, CheckboxStruct)).toBe(true);
+    },
+  );
+
+  it.each([
+    'foo',
+    42,
+    null,
+    undefined,
+    {},
+    [],
+    // @ts-expect-error - Invalid props.
+    <Spinner>foo</Spinner>,
+    <Text>foo</Text>,
+    <Box>
+      <Text>foo</Text>
+    </Box>,
+    <Row label="label">
+      <Image src="<svg />" alt="alt" />
+    </Row>,
+  ])('does not validate "%p"', (value) => {
+    expect(is(value, CheckboxStruct)).toBe(false);
+  });
+});
+
 describe('CopyableStruct', () => {
   it.each([
     <Copyable value="foo" />,
@@ -541,9 +572,6 @@ describe('DropdownStruct', () => {
     {},
     [],
     // @ts-expect-error - Invalid props.
-    <Dropdown name="foo" />,
-    <Dropdown name="foo" children={[]} />,
-    // @ts-expect-error - Invalid props.
     <Spinner>foo</Spinner>,
     <Text>foo</Text>,
     <Box>
@@ -553,7 +581,7 @@ describe('DropdownStruct', () => {
       <Image src="<svg />" alt="alt" />
     </Row>,
   ])('does not validate "%p"', (value) => {
-    expect(is(value, ValueStruct)).toBe(false);
+    expect(is(value, DropdownStruct)).toBe(false);
   });
 });
 

packages/snaps-sdk/src/jsx/validation.ts

@@ -37,6 +37,7 @@ import type {
   BoldElement,
   BoxElement,
   ButtonElement,
+  CheckboxElement,
   CopyableElement,
   DividerElement,
   DropdownElement,
@@ -135,6 +136,14 @@ export const ButtonStruct: Describe<ButtonElement> = element('Button', {
   disabled: optional(boolean()),
 });
 
+/**
+ * A struct for the {@link CheckboxElement} type.
+ */
+export const CheckboxStruct: Describe<CheckboxElement> = element('Checkbox', {
+  name: string(),
+  value: optional(boolean()),
+});
+
 /**
  * A struct for the {@link InputElement} type.
  */
@@ -396,6 +405,7 @@ export const BoxChildStruct = nullUnion([
   SpinnerStruct,
   TextStruct,
   TooltipStruct,
+  CheckboxStruct,
 ]);
 
 /**
@@ -429,6 +439,7 @@ export const JSXElementStruct: Describe<JSXElement> = nullUnion([
   OptionStruct,
   ValueStruct,
   TooltipStruct,
+  CheckboxStruct,
 ]);
 
 /**