Add disabled states to all input components (#3030)

Add `disabled` state to all input-related Snaps UI components.

Related task:
MetaMask/metamask-extension#29669

Extension integration PR:
MetaMask/metamask-extension#29896

![Screenshot 2025-01-24 at 16 35
56](https://github.com/user-attachments/assets/2a968c13-77a7-4dc9-8390-24666401323c)



https://github.com/user-attachments/assets/cb9eee52-31d6-4b3b-b83d-ac4ba136a2d8

packages/examples/packages/browserify-plugin/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "hqhKyin2aEwIBEINbyp58fba1ey8216iP25qGL6EEZ4=",
+    "shasum": "R4WjwqkDLNMUtU07n8AGq0WZKjsqjTjQXlASF++J4ws=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/browserify/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "nnIVqIGRhj27zj2pHhpg9RN8HRiEH/o9EIBzhOhEhVs=",
+    "shasum": "06xWu+ehUlNMpbJQxTZi2mlnAJId3cLHEK6fWD2Z9rc=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/snaps-sdk/src/jsx/components/form/Checkbox.test.tsx

@@ -14,9 +14,15 @@ describe('Checkbox', () => {
     });
   });
 
-  it('renders a checkbox with a variant and a label', () => {
+  it('renders a disabled checkbox with a variant and a label', () => {
     const result = (
-      <Checkbox name="foo" label="Foo" checked={true} variant="toggle" />
+      <Checkbox
+        name="foo"
+        label="Foo"
+        checked={true}
+        variant="toggle"
+        disabled={true}
+      />
     );
 
     expect(result).toStrictEqual({
@@ -26,6 +32,7 @@ describe('Checkbox', () => {
         checked: true,
         variant: 'toggle',
         label: 'Foo',
+        disabled: true,
       },
       key: null,
     });

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

@@ -8,12 +8,14 @@ import { createSnapComponent } from '../../component';
  * @property checked - Whether the checkbox is checked or not.
  * @property label - An optional label for the checkbox.
  * @property variant - An optional variant for the checkbox.
+ * @property disabled - Whether the checkbox is disabled.
  */
 export type CheckboxProps = {
   name: string;
   checked?: boolean | undefined;
   label?: string | undefined;
   variant?: 'default' | 'toggle' | undefined;
+  disabled?: boolean | undefined;
 };
 
 const TYPE = 'Checkbox';
@@ -27,6 +29,7 @@ const TYPE = 'Checkbox';
  * @param props.checked - Whether the checkbox is checked or not.
  * @param props.label - An optional label for the checkbox.
  * @param props.variant - An optional variant for the checkbox.
+ * @param props.disabled - Whether the checkbox is disabled.
  * @returns A checkbox element.
  * @example
  * <Checkbox name="accept-terms" />

packages/snaps-sdk/src/jsx/components/form/Dropdown.test.tsx

@@ -66,4 +66,41 @@ describe('Dropdown', () => {
       key: null,
     });
   });
+
+  it('renders disabled dropdown with options', () => {
+    const result = (
+      <Dropdown name="dropdown" value="foo" disabled={true}>
+        <Option value="foo">Foo</Option>
+        <Option value="bar">Bar</Option>
+      </Dropdown>
+    );
+
+    expect(result).toStrictEqual({
+      type: 'Dropdown',
+      props: {
+        name: 'dropdown',
+        value: 'foo',
+        disabled: true,
+        children: [
+          {
+            type: 'Option',
+            props: {
+              value: 'foo',
+              children: 'Foo',
+            },
+            key: null,
+          },
+          {
+            type: 'Option',
+            props: {
+              value: 'bar',
+              children: 'Bar',
+            },
+            key: null,
+          },
+        ],
+      },
+      key: null,
+    });
+  });
 });

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

@@ -9,11 +9,13 @@ import type { OptionElement } from './Option';
  * state in the form data.
  * @property value - The selected value of the dropdown.
  * @property children - The children of the dropdown.
+ * @property disabled - Whether the dropdown is disabled.
  */
 export type DropdownProps = {
   name: string;
   value?: string | undefined;
   children: SnapsChildren<OptionElement>;
+  disabled?: boolean | undefined;
 };
 
 const TYPE = 'Dropdown';
@@ -26,6 +28,7 @@ const TYPE = 'Dropdown';
  * state in the form data.
  * @param props.value - The selected value of the dropdown.
  * @param props.children - The children of the dropdown.
+ * @param props.disabled - Whether the dropdown is disabled.
  * @returns A dropdown element.
  * @example
  * <Dropdown name="dropdown">

packages/snaps-sdk/src/jsx/components/form/FileInput.test.tsx

@@ -26,4 +26,17 @@ describe('FileInput', () => {
       key: null,
     });
   });
+
+  it('renders disabled file input', () => {
+    const result = <FileInput name="foo" disabled={true} />;
+
+    expect(result).toStrictEqual({
+      type: 'FileInput',
+      props: {
+        name: 'foo',
+        disabled: true,
+      },
+      key: null,
+    });
+  });
 });

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

@@ -10,11 +10,13 @@ import { createSnapComponent } from '../../component';
  * specified, the file input field accepts all file types.
  * @property compact - Whether the file input field is compact. Default is
  * `false`.
+ * @property disabled - whether the file input is disabled.
  */
 export type FileInputProps = {
   name: string;
   accept?: string[] | undefined;
   compact?: boolean | undefined;
+  disabled?: boolean | undefined;
 };
 
 const TYPE = 'FileInput';
@@ -33,6 +35,7 @@ const TYPE = 'FileInput';
  * valid values, see the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept).
  * @param props.compact - Whether the file input field is compact. Default is
  * `false`.
+ * @param props.disabled - Whether the file input is disabled.
  * @returns A file input element.
  * @example
  * <FileInput name="file" accept={['image/*']} />

packages/snaps-sdk/src/jsx/components/form/Input.test.tsx

@@ -42,4 +42,58 @@ describe('Input', () => {
       key: null,
     });
   });
+
+  it('renders a disabled text input', () => {
+    const result = <Input name="foo" type="text" disabled={true} />;
+
+    expect(result).toStrictEqual({
+      type: 'Input',
+      props: {
+        name: 'foo',
+        type: 'text',
+        disabled: true,
+      },
+      key: null,
+    });
+  });
+
+  it('renders a disabled number input', () => {
+    const result = (
+      <Input
+        name="foo"
+        type="number"
+        min={0}
+        max={10}
+        step={1}
+        disabled={true}
+      />
+    );
+
+    expect(result).toStrictEqual({
+      type: 'Input',
+      props: {
+        name: 'foo',
+        type: 'number',
+        min: 0,
+        max: 10,
+        step: 1,
+        disabled: true,
+      },
+      key: null,
+    });
+  });
+
+  it('renders a disabled password input', () => {
+    const result = <Input name="foo" type="password" disabled={true} />;
+
+    expect(result).toStrictEqual({
+      type: 'Input',
+      props: {
+        name: 'foo',
+        type: 'password',
+        disabled: true,
+      },
+      key: null,
+    });
+  });
 });

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

@@ -6,6 +6,7 @@ export type GenericInputProps = {
   name: string;
   value?: string | undefined;
   placeholder?: string | undefined;
+  disabled?: boolean | undefined;
 };
 
 export type TextInputProps = { type: 'text' } & GenericInputProps;
@@ -57,6 +58,7 @@ const TYPE = 'Input';
  * Only applicable to the type `number` input.
  * @param props.step - The step value of the input field.
  * Only applicable to the type `number` input.
+ * @param props.disabled - Whether the input is disabled.
  * @returns An input element.
  * @example
  * <Input name="username" type="text" />

packages/snaps-sdk/src/jsx/components/form/Option.test.tsx

@@ -13,4 +13,22 @@ describe('Option', () => {
       key: null,
     });
   });
+
+  it('renders disabled dropdown option', () => {
+    const result = (
+      <Option value="foo" disabled={true}>
+        Foo
+      </Option>
+    );
+
+    expect(result).toStrictEqual({
+      type: 'Option',
+      props: {
+        value: 'foo',
+        children: 'Foo',
+        disabled: true,
+      },
+      key: null,
+    });
+  });
 });

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

@@ -8,10 +8,12 @@ import { Dropdown } from './Dropdown';
  * @property value - The value of the dropdown option. This is used to populate the
  * state in the form data.
  * @property children - The text to display.
+ * @property disabled - Whether the option is disabled.
  */
 type OptionProps = {
   value: string;
   children: string;
+  disabled?: boolean;
 };
 
 const TYPE = 'Option';
@@ -24,6 +26,7 @@ const TYPE = 'Option';
  * @param props.value - The value of the dropdown option. This is used to populate the
  * state in the form data.
  * @param props.children - The text to display.
+ * @param props.disabled - Whether the option is disabled.
  * @returns A dropdown option element.
  * @example
  * <Dropdown name="dropdown">

packages/snaps-sdk/src/jsx/components/form/Radio.test.tsx

@@ -13,4 +13,22 @@ describe('Radio', () => {
       key: null,
     });
   });
+
+  it('renders a disabled radio option', () => {
+    const result = (
+      <Radio value="foo" disabled={true}>
+        Foo
+      </Radio>
+    );
+
+    expect(result).toStrictEqual({
+      type: 'Radio',
+      props: {
+        value: 'foo',
+        disabled: true,
+        children: 'Foo',
+      },
+      key: null,
+    });
+  });
 });

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

@@ -6,10 +6,12 @@ import { createSnapComponent } from '../../component';
  * @property value - The value of the radio option. This is used to populate the
  * state in the form data.
  * @property children - The text to display.
+ * @property disabled - Whether the radio is disabled.
  */
 type RadioProps = {
   value: string;
   children: string;
+  disabled?: boolean | undefined;
 };
 
 const TYPE = 'Radio';
@@ -22,6 +24,7 @@ const TYPE = 'Radio';
  * @param props.value - The value of the radio option. This is used to populate the
  * state in the form data.
  * @param props.children - The text to display.
+ * @param props.disabled - Whether the radio is disabled.
  * @returns A radio element.
  * @example
  * <RadioGroup name="radio-group">

packages/snaps-sdk/src/jsx/components/form/RadioGroup.test.tsx

@@ -45,4 +45,40 @@ describe('RadioGroup', () => {
       key: null,
     });
   });
+
+  it('renders a disabled Radio group', () => {
+    const result = (
+      <RadioGroup name="radio-choice" disabled={true}>
+        <Radio value="A">Option A</Radio>
+        <Radio value="B">Option B</Radio>
+      </RadioGroup>
+    );
+
+    expect(result).toStrictEqual({
+      type: 'RadioGroup',
+      props: {
+        name: 'radio-choice',
+        disabled: true,
+        children: [
+          {
+            type: 'Radio',
+            key: null,
+            props: {
+              value: 'A',
+              children: 'Option A',
+            },
+          },
+          {
+            type: 'Radio',
+            key: null,
+            props: {
+              value: 'B',
+              children: 'Option B',
+            },
+          },
+        ],
+      },
+      key: null,
+    });
+  });
 });