2.0 Overhaul start

src/components/PageComponents/ModuleConfig/CannedMessage.tsx

@@ -1,9 +1,11 @@
 import type React from "react";
 import { useEffect, useState } from "react";
 
-import { FormField, SelectField, Switch, TextInputField } from "evergreen-ui";
 import { Controller, useForm, useWatch } from "react-hook-form";
 
+import { Input } from "@app/components/form/Input.js";
+import { Select } from "@app/components/form/Select.js";
+import { Toggle } from "@app/components/form/Toggle.js";
 import { CannedMessageValidation } from "@app/validation/moduleConfig/cannedMessage.js";
 import { Form } from "@components/form/Form";
 import { useDevice } from "@core/providers/useDevice.js";
@@ -52,57 +54,60 @@ export const CannedMessage = (): JSX.Element => {
     );
   });
   return (
-    <Form loading={loading} dirty={isDirty} onSubmit={onSubmit}>
-      <FormField
-        label="Module Enabled"
-        description="This is a description."
-        isInvalid={!!errors.enabled?.message}
-        validationMessage={errors.enabled?.message}
-      >
-        <Controller
-          name="enabled"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
-      <FormField
-        label="Rotary Encoder #1 Enabled"
-        description="This is a description."
-        isInvalid={!!errors.rotary1Enabled?.message}
-        validationMessage={errors.rotary1Enabled?.message}
-      >
-        <Controller
-          name="rotary1Enabled"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
-      <TextInputField
+    <Form
+      title="Canned Message Config"
+      breadcrumbs={["Module Config", "Canned Message"]}
+      reset={() => reset(moduleConfig.cannedMessage)}
+      loading={loading}
+      dirty={isDirty}
+      onSubmit={onSubmit}
+    >
+      <Controller
+        name="enabled"
+        control={control}
+        render={({ field: { value, ...rest } }) => (
+          <Toggle
+            label="Module Enabled"
+            description="Description"
+            checked={value}
+            {...rest}
+          />
+        )}
+      />
+      <Controller
+        name="rotary1Enabled"
+        control={control}
+        render={({ field: { value, ...rest } }) => (
+          <Toggle
+            label="Rotary Encoder #1 Enabled"
+            description="Description"
+            checked={value}
+            {...rest}
+          />
+        )}
+      />
+      <Input
         label="Encoder Pin A"
         description="Max transmit power in dBm"
         type="number"
         disabled={moduleEnabled}
         {...register("inputbrokerPinA", { valueAsNumber: true })}
       />
-      <TextInputField
+      <Input
         label="Encoder Pin B"
         description="Max transmit power in dBm"
         type="number"
         disabled={moduleEnabled}
         {...register("inputbrokerPinB", { valueAsNumber: true })}
       />
-      <TextInputField
+      <Input
         label="Endoer Pin Press"
         description="Max transmit power in dBm"
         type="number"
         disabled={moduleEnabled}
         {...register("inputbrokerPinPress", { valueAsNumber: true })}
       />
-      <SelectField
+      <Select
         label="Clockwise event"
         description="This is a description."
         disabled={moduleEnabled}
@@ -111,8 +116,8 @@ export const CannedMessage = (): JSX.Element => {
         {renderOptions(
           Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar
         )}
-      </SelectField>
-      <SelectField
+      </Select>
+      <Select
         label="Counter Clockwise event"
         description="This is a description."
         disabled={moduleEnabled}
@@ -121,8 +126,8 @@ export const CannedMessage = (): JSX.Element => {
         {renderOptions(
           Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar
         )}
-      </SelectField>
-      <SelectField
+      </Select>
+      <Select
         label="Press event"
         description="This is a description."
         disabled={moduleEnabled}
@@ -131,41 +136,37 @@ export const CannedMessage = (): JSX.Element => {
         {renderOptions(
           Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar
         )}
-      </SelectField>
-      <FormField
-        label="Up Down enabled"
-        description="This is a description."
-        isInvalid={!!errors.updown1Enabled?.message}
-        validationMessage={errors.updown1Enabled?.message}
-      >
-        <Controller
-          name="updown1Enabled"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
-      <TextInputField
+      </Select>
+      <Controller
+        name="updown1Enabled"
+        control={control}
+        render={({ field: { value, ...rest } }) => (
+          <Toggle
+            label="Up Down enabled"
+            description="Description"
+            checked={value}
+            {...rest}
+          />
+        )}
+      />
+      <Input
         label="Allow Input Source"
         description="Max transmit power in dBm"
         disabled={moduleEnabled}
         {...register("allowInputSource")}
       />
-      <FormField
-        label="Send Bell"
-        description="This is a description."
-        isInvalid={!!errors.sendBell?.message}
-        validationMessage={errors.sendBell?.message}
-      >
-        <Controller
-          name="sendBell"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
+      <Controller
+        name="sendBell"
+        control={control}
+        render={({ field: { value, ...rest } }) => (
+          <Toggle
+            label="Send Bell"
+            description="Description"
+            checked={value}
+            {...rest}
+          />
+        )}
+      />
     </Form>
   );
 };

src/components/PageComponents/ModuleConfig/ExternalNotification.tsx

@@ -1,9 +1,10 @@
 import type React from "react";
 import { useEffect, useState } from "react";
 
-import { FormField, Switch, TextInputField } from "evergreen-ui";
 import { Controller, useForm, useWatch } from "react-hook-form";
 
+import { Input } from "@app/components/form/Input.js";
+import { Toggle } from "@app/components/form/Toggle.js";
 import { ExternalNotificationValidation } from "@app/validation/moduleConfig/externalNotification.js";
 import { Form } from "@components/form/Form";
 import { useDevice } from "@core/providers/useDevice.js";
@@ -50,32 +51,37 @@ export const ExternalNotification = (): JSX.Element => {
   });
 
   return (
-    <Form loading={loading} dirty={isDirty} onSubmit={onSubmit}>
-      <FormField
-        label="Module Enabled"
-        description="Description"
-        isInvalid={!!errors.enabled?.message}
-        validationMessage={errors.enabled?.message}
-      >
-        <Controller
-          name="enabled"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
-      <TextInputField
+    <Form
+      title="External Notification Config"
+      breadcrumbs={["Module Config", "External Notification"]}
+      reset={() => reset(moduleConfig.externalNotification)}
+      loading={loading}
+      dirty={isDirty}
+      onSubmit={onSubmit}
+    >
+      <Controller
+        name="enabled"
+        control={control}
+        render={({ field: { value, ...rest } }) => (
+          <Toggle
+            label="Module Enabled"
+            description="Description"
+            checked={value}
+            {...rest}
+          />
+        )}
+      />
+      <Input
         type="number"
         label="Output MS"
         description="Max transmit power in dBm"
-        hint="ms"
+        suffix="ms"
         disabled={!moduleEnabled}
         {...register("outputMs", {
           valueAsNumber: true,
         })}
       />
-      <TextInputField
+      <Input
         type="number"
         label="Output"
         description="Max transmit power in dBm"
@@ -84,51 +90,42 @@ export const ExternalNotification = (): JSX.Element => {
           valueAsNumber: true,
         })}
       />
-      <FormField
-        label="Active"
-        description="Description"
-        disabled={!moduleEnabled}
-        isInvalid={!!errors.active?.message}
-        validationMessage={errors.active?.message}
-      >
-        <Controller
-          name="active"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
-      <FormField
-        label="Message"
-        description="Description"
-        disabled={!moduleEnabled}
-        isInvalid={!!errors.alertMessage?.message}
-        validationMessage={errors.alertMessage?.message}
-      >
-        <Controller
-          name="alertMessage"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
-      <FormField
-        label="Bell"
-        description="Description"
-        disabled={!moduleEnabled}
-        isInvalid={!!errors.alertBell?.message}
-        validationMessage={errors.alertBell?.message}
-      >
-        <Controller
-          name="alertBell"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
+      <Controller
+        name="active"
+        control={control}
+        render={({ field: { value, ...rest } }) => (
+          <Toggle
+            label="Active"
+            description="Description"
+            checked={value}
+            {...rest}
+          />
+        )}
+      />
+      <Controller
+        name="alertMessage"
+        control={control}
+        render={({ field: { value, ...rest } }) => (
+          <Toggle
+            label="Message"
+            description="Description"
+            checked={value}
+            {...rest}
+          />
+        )}
+      />
+      <Controller
+        name="alertBell"
+        control={control}
+        render={({ field: { value, ...rest } }) => (
+          <Toggle
+            label="Bell"
+            description="Description"
+            checked={value}
+            {...rest}
+          />
+        )}
+      />
     </Form>
   );
 };

src/components/PageComponents/ModuleConfig/MQTT.tsx

@@ -1,9 +1,10 @@
 import type React from "react";
 import { useEffect, useState } from "react";
 
-import { FormField, Switch, TextInputField } from "evergreen-ui";
 import { Controller, useForm, useWatch } from "react-hook-form";
 
+import { Input } from "@app/components/form/Input.js";
+import { Toggle } from "@app/components/form/Toggle.js";
 import { MQTTValidation } from "@app/validation/moduleConfig/mqtt.js";
 import { Form } from "@components/form/Form";
 import { useDevice } from "@core/providers/useDevice.js";
@@ -50,34 +51,39 @@ export const MQTT = (): JSX.Element => {
     );
   });
   return (
-    <Form loading={loading} dirty={isDirty} onSubmit={onSubmit}>
-      <FormField
-        label="Module Enabled"
-        description="Description"
-        isInvalid={!!errors.enabled?.message}
-        validationMessage={errors.enabled?.message}
-      >
-        <Controller
-          name="enabled"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
-      <TextInputField
+    <Form
+      title="MQTT Config"
+      breadcrumbs={["Module Config", "MQTT"]}
+      reset={() => reset(moduleConfig.mqtt)}
+      loading={loading}
+      dirty={isDirty}
+      onSubmit={onSubmit}
+    >
+      <Controller
+        name="enabled"
+        control={control}
+        render={({ field: { value, ...rest } }) => (
+          <Toggle
+            label="Module Enabled"
+            description="Description"
+            checked={value}
+            {...rest}
+          />
+        )}
+      />
+      <Input
         label="MQTT Server Address"
         description="Description"
         disabled={!moduleEnabled}
         {...register("address")}
       />
-      <TextInputField
+      <Input
         label="MQTT Username"
         description="Description"
         disabled={!moduleEnabled}
         {...register("username")}
       />
-      <TextInputField
+      <Input
         label="MQTT Password"
         description="Description"
         type="password"
@@ -85,36 +91,30 @@ export const MQTT = (): JSX.Element => {
         disabled={!moduleEnabled}
         {...register("password")}
       />
-      <FormField
-        label="Encryption Enabled"
-        description="Description"
-        disabled={!moduleEnabled}
-        isInvalid={!!errors.encryptionEnabled?.message}
-        validationMessage={errors.encryptionEnabled?.message}
-      >
-        <Controller
-          name="encryptionEnabled"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
-      <FormField
-        label="JSON Output Enabled"
-        description="Description"
-        disabled={!moduleEnabled}
-        isInvalid={!!errors.jsonEnabled?.message}
-        validationMessage={errors.jsonEnabled?.message}
-      >
-        <Controller
-          name="jsonEnabled"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
+      <Controller
+        name="encryptionEnabled"
+        control={control}
+        render={({ field: { value, ...rest } }) => (
+          <Toggle
+            label="Encryption Enabled"
+            description="Description"
+            checked={value}
+            {...rest}
+          />
+        )}
+      />
+      <Controller
+        name="jsonEnabled"
+        control={control}
+        render={({ field: { value, ...rest } }) => (
+          <Toggle
+            label="JSON Output Enabled"
+            description="Description"
+            checked={value}
+            {...rest}
+          />
+        )}
+      />
     </Form>
   );
 };

src/components/PageComponents/ModuleConfig/RangeTest.tsx

@@ -1,9 +1,10 @@
 import type React from "react";
 import { useEffect, useState } from "react";
 
-import { FormField, Switch, TextInputField } from "evergreen-ui";
 import { Controller, useForm, useWatch } from "react-hook-form";
 
+import { Input } from "@app/components/form/Input.js";
+import { Toggle } from "@app/components/form/Toggle.js";
 import { RangeTestValidation } from "@app/validation/moduleConfig/rangeTest.js";
 import { Form } from "@components/form/Form";
 import { useDevice } from "@core/providers/useDevice.js";
@@ -51,46 +52,48 @@ export const RangeTest = (): JSX.Element => {
   });
 
   return (
-    <Form loading={loading} dirty={isDirty} onSubmit={onSubmit}>
-      <FormField
-        label="Module Enabled"
-        description="Description"
-        isInvalid={!!errors.enabled?.message}
-        validationMessage={errors.enabled?.message}
-      >
-        <Controller
-          name="enabled"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
-      <TextInputField
+    <Form
+      title="Range Test Config"
+      breadcrumbs={["Module Config", "Range Test"]}
+      reset={() => reset(moduleConfig.rangeTest)}
+      loading={loading}
+      dirty={isDirty}
+      onSubmit={onSubmit}
+    >
+      <Controller
+        name="enabled"
+        control={control}
+        render={({ field: { value, ...rest } }) => (
+          <Toggle
+            label="Module Enabled"
+            description="Description"
+            checked={value}
+            {...rest}
+          />
+        )}
+      />
+      <Input
         type="number"
         label="Message Interval"
         description="Max transmit power in dBm"
         disabled={!moduleEnabled}
-        hint="Seconds"
+        suffix="Seconds"
         {...register("sender", {
           valueAsNumber: true,
         })}
       />
-      <FormField
-        label="Save CSV to storage"
-        description="Description"
-        disabled={!moduleEnabled}
-        isInvalid={!!errors.save?.message}
-        validationMessage={errors.save?.message}
-      >
-        <Controller
-          name="save"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
+      <Controller
+        name="save"
+        control={control}
+        render={({ field: { value, ...rest } }) => (
+          <Toggle
+            label="Save CSV to storage"
+            description="Description"
+            checked={value}
+            {...rest}
+          />
+        )}
+      />
     </Form>
   );
 };

src/components/PageComponents/ModuleConfig/Serial.tsx

@@ -1,9 +1,10 @@
 import type React from "react";
 import { useEffect, useState } from "react";
 
-import { FormField, Switch, TextInputField } from "evergreen-ui";
 import { Controller, useForm, useWatch } from "react-hook-form";
 
+import { Input } from "@app/components/form/Input.js";
+import { Toggle } from "@app/components/form/Toggle.js";
 import { SerialValidation } from "@app/validation/moduleConfig/serial.js";
 import { Form } from "@components/form/Form";
 import { useDevice } from "@core/providers/useDevice.js";
@@ -51,37 +52,39 @@ export const Serial = (): JSX.Element => {
   });
 
   return (
-    <Form loading={loading} dirty={isDirty} onSubmit={onSubmit}>
-      <FormField
-        label="Module Enabled"
-        description="Description"
-        isInvalid={!!errors.enabled?.message}
-        validationMessage={errors.enabled?.message}
-      >
-        <Controller
-          name="enabled"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
-      <FormField
-        label="Echo"
-        description="Description"
-        disabled={!moduleEnabled}
-        isInvalid={!!errors.echo?.message}
-        validationMessage={errors.echo?.message}
-      >
-        <Controller
-          name="echo"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
-      <TextInputField
+    <Form
+      title="Serial Config"
+      breadcrumbs={["Module Config", "Serial"]}
+      reset={() => reset(moduleConfig.serial)}
+      loading={loading}
+      dirty={isDirty}
+      onSubmit={onSubmit}
+    >
+      <Controller
+        name="enabled"
+        control={control}
+        render={({ field: { value, ...rest } }) => (
+          <Toggle
+            label="Module Enabled"
+            description="Description"
+            checked={value}
+            {...rest}
+          />
+        )}
+      />
+      <Controller
+        name="echo"
+        control={control}
+        render={({ field: { value, ...rest } }) => (
+          <Toggle
+            label="Echo"
+            description="Description"
+            checked={value}
+            {...rest}
+          />
+        )}
+      />
+      <Input
         type="number"
         label="RX"
         description="Max transmit power in dBm"
@@ -90,7 +93,7 @@ export const Serial = (): JSX.Element => {
           valueAsNumber: true,
         })}
       />
-      <TextInputField
+      <Input
         type="number"
         label="TX Pin"
         description="Max transmit power in dBm"
@@ -99,7 +102,7 @@ export const Serial = (): JSX.Element => {
           valueAsNumber: true,
         })}
       />
-      <TextInputField
+      <Input
         type="number"
         label="Baud Rate"
         description="Max transmit power in dBm"
@@ -108,7 +111,7 @@ export const Serial = (): JSX.Element => {
           valueAsNumber: true,
         })}
       />
-      <TextInputField
+      <Input
         type="number"
         label="Timeout"
         description="Max transmit power in dBm"
@@ -117,7 +120,7 @@ export const Serial = (): JSX.Element => {
           valueAsNumber: true,
         })}
       />
-      <TextInputField
+      <Input
         type="number"
         label="Mode"
         description="Max transmit power in dBm"

src/components/PageComponents/ModuleConfig/StoreForward.tsx

@@ -1,9 +1,10 @@
 import type React from "react";
 import { useEffect, useState } from "react";
 
-import { FormField, Switch, TextInputField } from "evergreen-ui";
 import { Controller, useForm, useWatch } from "react-hook-form";
 
+import { Input } from "@app/components/form/Input.js";
+import { Toggle } from "@app/components/form/Toggle.js";
 import { StoreForwardValidation } from "@app/validation/moduleConfig/storeForward.js";
 import { Form } from "@components/form/Form";
 import { useDevice } from "@core/providers/useDevice.js";
@@ -51,47 +52,49 @@ export const StoreForward = (): JSX.Element => {
   });
 
   return (
-    <Form loading={loading} dirty={isDirty} onSubmit={onSubmit}>
-      <FormField
-        label="Module Enabled"
-        description="Description"
-        isInvalid={!!errors.enabled?.message}
-        validationMessage={errors.enabled?.message}
-      >
-        <Controller
-          name="enabled"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
-      <FormField
-        label="Heartbeat Enabled"
-        description="Description"
-        disabled={!moduleEnabled}
-        isInvalid={!!errors.heartbeat?.message}
-        validationMessage={errors.heartbeat?.message}
-      >
-        <Controller
-          name="heartbeat"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
-      <TextInputField
+    <Form
+      title="Store & Forward Config"
+      breadcrumbs={["Module Config", "Store & Forward"]}
+      reset={() => reset(moduleConfig.storeForward)}
+      loading={loading}
+      dirty={isDirty}
+      onSubmit={onSubmit}
+    >
+      <Controller
+        name="enabled"
+        control={control}
+        render={({ field: { value, ...rest } }) => (
+          <Toggle
+            label="Module Enabled"
+            description="Description"
+            checked={value}
+            {...rest}
+          />
+        )}
+      />
+      <Controller
+        name="heartbeat"
+        control={control}
+        render={({ field: { value, ...rest } }) => (
+          <Toggle
+            label="Heartbeat Enabled"
+            description="Description"
+            checked={value}
+            {...rest}
+          />
+        )}
+      />
+      <Input
         type="number"
         label="Number of records"
         description="Max transmit power in dBm"
-        hint="Records"
+        suffix="Records"
         disabled={!moduleEnabled}
         {...register("records", {
           valueAsNumber: true,
         })}
       />
-      <TextInputField
+      <Input
         type="number"
         label="History return max"
         description="Max transmit power in dBm"
@@ -100,7 +103,7 @@ export const StoreForward = (): JSX.Element => {
           valueAsNumber: true,
         })}
       />
-      <TextInputField
+      <Input
         type="number"
         label="History return window"
         description="Max transmit power in dBm"

src/components/PageComponents/ModuleConfig/Telemetry.tsx

@@ -1,9 +1,10 @@
 import type React from "react";
 import { useEffect, useState } from "react";
 
-import { FormField, Switch, TextInputField } from "evergreen-ui";
 import { Controller, useForm } from "react-hook-form";
 
+import { Input } from "@app/components/form/Input.js";
+import { Toggle } from "@app/components/form/Toggle.js";
 import { TelemetryValidation } from "@app/validation/moduleConfig/telemetry.js";
 import { Form } from "@components/form/Form";
 import { useDevice } from "@core/providers/useDevice.js";
@@ -44,58 +45,59 @@ export const Telemetry = (): JSX.Element => {
     );
   });
   return (
-    <Form loading={loading} dirty={isDirty} onSubmit={onSubmit}>
-      <FormField
-        label="Measurement Enabled"
-        description="Description"
-        isInvalid={!!errors.environmentMeasurementEnabled?.message}
-        validationMessage={errors.environmentMeasurementEnabled?.message}
-      >
-        <Controller
-          name="environmentMeasurementEnabled"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
-      <FormField
-        label="Displayed on Screen"
-        description="Description"
-        isInvalid={!!errors.environmentScreenEnabled?.message}
-        validationMessage={errors.environmentScreenEnabled?.message}
-      >
-        <Controller
-          name="environmentScreenEnabled"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
-      <TextInputField
+    <Form
+      title="Telemetry Config"
+      breadcrumbs={["Module Config", "Telemetry"]}
+      reset={() => reset(moduleConfig.telemetry)}
+      loading={loading}
+      dirty={isDirty}
+      onSubmit={onSubmit}
+    >
+      <Controller
+        name="environmentMeasurementEnabled"
+        control={control}
+        render={({ field: { value, ...rest } }) => (
+          <Toggle
+            label="Module Enabled"
+            description="Description"
+            checked={value}
+            {...rest}
+          />
+        )}
+      />
+      <Controller
+        name="environmentScreenEnabled"
+        control={control}
+        render={({ field: { value, ...rest } }) => (
+          <Toggle
+            label="Displayed on Screen"
+            description="Description"
+            checked={value}
+            {...rest}
+          />
+        )}
+      />
+      <Input
         label="Update Interval"
         description="Max transmit power in dBm"
-        hint="Seconds"
+        suffix="Seconds"
         type="number"
         {...register("environmentUpdateInterval", {
           valueAsNumber: true,
         })}
       />
-      <FormField
-        label="Display Farenheit"
-        description="Description"
-        isInvalid={!!errors.environmentDisplayFahrenheit?.message}
-        validationMessage={errors.environmentDisplayFahrenheit?.message}
-      >
-        <Controller
-          name="environmentDisplayFahrenheit"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
+      <Controller
+        name="environmentDisplayFahrenheit"
+        control={control}
+        render={({ field: { value, ...rest } }) => (
+          <Toggle
+            label="Display Farenheit"
+            description="Description"
+            checked={value}
+            {...rest}
+          />
+        )}
+      />
     </Form>
   );
 };