Checkbox

<FormField
          control={form.control}
          name="use_different_settings_for_my_mobile_devices"
          render={({ field }) => (
            <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
              <FormControl>
                <Checkbox
                  checked={field.value === true}
                  onCheckedChange={(nextValue) => {
                    form.setValue(field.name, nextValue === true, {
                      shouldValidate: true,
                      shouldDirty: true,
                      shouldTouch: true
                    })
                  }}
                  
                />
              </FormControl>
              <div className="space-y-1 leading-none">
                <FormLabel>Use different settings for my mobile devices</FormLabel>
                <FormDescription>You can manage your mobile notifications in the mobile settings page.</FormDescription>
                <FormMessage />
              </div>
            </FormItem>
          )}
        />