move all input things into their own files

src/ui/elements/forms/Checkbox.tsx

@@ -0,0 +1,17 @@
+import { JSX, RefObject } from "preact";
+import { InputProps } from "./InputProps";
+
+type CheckboxProps = InputProps & {
+  checkboxRef?: RefObject<HTMLInputElement>;
+}
+
+export function Checkbox(props: CheckboxProps): JSX.Element {
+  return (
+    <input
+      class="uk-checkbox"
+      type="checkbox"
+      ref={props.checkboxRef}
+      {...props}
+    />
+  )
+}

src/ui/elements/forms/InputProps.tsx

@@ -0,0 +1,9 @@
+export type InputProps = {
+    name?: string;
+    value?: string;
+    placeholder?: string;
+    onChange?: () => void;
+    required?: boolean;
+    checked?: boolean;
+    extraProps?: {};
+}

src/ui/elements/forms/NumberInput.tsx

@@ -0,0 +1,17 @@
+import { JSX, RefObject } from "preact";
+import { InputProps } from "./InputProps";
+
+type NumberInputProps = InputProps & {
+  inputRef?: RefObject<HTMLInputElement>;
+}
+
+export function NumberInput(props: NumberInputProps): JSX.Element {
+  return (
+    <input
+      class="uk-input uk-form-width-medium"
+      type="number"
+      ref={props.inputRef}
+      {...props}
+    />
+  )
+}

src/ui/elements/forms/PasswordInput.tsx

@@ -0,0 +1,17 @@
+import { JSX, RefObject } from "preact";
+import { InputProps } from "./InputProps";
+
+type PasswordInputProps = InputProps & {
+  inputRef?: RefObject<HTMLInputElement>;
+}
+
+export function PasswordInput(props: PasswordInputProps): JSX.Element {
+  return (
+    <input
+      class="uk-input uk-form-width-medium"
+      type="password"
+      ref={props.inputRef}
+      {...props}
+    />
+  )
+}

src/ui/elements/forms/Select.tsx

@@ -0,0 +1,33 @@
+import { JSX, RefObject } from "preact";
+import { InputProps } from "./InputProps";
+
+type SelectProps = InputProps & {
+  selectRef?: RefObject<HTMLSelectElement>;
+  children?: JSX.Element | JSX.Element[];
+}
+
+export function Select(props: SelectProps): JSX.Element {
+  return (
+    <select
+      class="uk-select uk-form-width-medium"
+      ref={props.selectRef}
+      {...props}
+    >
+      {props.children}
+    </select>
+  )
+}
+
+type SelectOptionProps = {
+  name: string;
+  value: string;
+  selected?: boolean;
+}
+
+export function SelectOption(props: SelectOptionProps): JSX.Element {
+  return (
+    <option label={props.name} value={props.value} selected={props.selected}>
+      {props.name}
+    </option>
+  )
+}

src/ui/elements/forms/TextArea.tsx

@@ -0,0 +1,16 @@
+import { JSX, RefObject } from "preact";
+import { InputProps } from "./InputProps";
+
+type TextInputProps = InputProps & {
+  textAreaRef?: RefObject<HTMLInputElement>;
+}
+
+export function TextArea(props: TextInputProps): JSX.Element {
+  return (
+    <textarea
+      class="uk-textarea uk-form-width-medium"
+      textAreaRef={props.textAreaRef}
+      {...props}
+    />
+  )
+}

src/ui/elements/forms/TextInput.tsx

@@ -0,0 +1,17 @@
+import { JSX, RefObject } from "preact";
+import { InputProps } from "./InputProps";
+
+type TextInputProps = InputProps & {
+  inputRef?: RefObject<HTMLInputElement>;
+}
+
+export function TextInput(props: TextInputProps): JSX.Element {
+  return (
+    <input
+      class="uk-input uk-form-width-medium"
+      type="text"
+      ref={props.inputRef}
+      {...props}
+    />
+  )
+}

src/ui/pages/Access/Auth/userpass/UserPassUserEdit.tsx

@@ -2,7 +2,7 @@ import { Button } from "../../../../elements/Button";
 import { Component, createRef } from "preact";
 import { DefaultPageProps } from "../../../../../types/DefaultPageProps";
 import { ErrorMessage, sendErrorNotification } from "../../../../elements/ErrorMessage";
-import { Form } from "../../../../elements/Form";
+import { Form } from "../../../../elements/forms/Form";
 import { InputWithTitle } from "../../../../elements/InputWithTitle";
 import { Margin } from "../../../../elements/Margin";
 import { MarginInline } from "../../../../elements/MarginInline";
@@ -12,6 +12,10 @@ import { route } from "preact-router";
 import { toStr } from "../../../../../utils";
 import { userPassUserViewURL } from "../../../pageLinks";
 import i18next from "i18next";
+import { PasswordInput } from "../../../../elements/forms/PasswordInput";
+import { TextInput } from "../../../../elements/forms/TextInput";
+import { NumberInput } from "../../../../elements/forms/NumberInput";
+import { Checkbox } from "../../../../elements/forms/Checkbox";
 
 const removeEmptyStrings = (arr: string[]) => arr.filter((e) => e.length > 0);
 
@@ -40,12 +44,7 @@ export class UserPassUserEdit extends Component<DefaultPageProps, { user_data: U
         <PageTitle title={i18next.t("userpass_user_edit_title")} />
         <Form onSubmit={(data) => this.onSubmit(data)}>
           <InputWithTitle title={i18next.t("common_password")}>
-            <input
+            <PasswordInput name="password" />
-              class="uk-input uk-form-width-large"
-              name="password"
-              type="password"
-              placeholder={i18next.t("common_password")}
-            />
           </InputWithTitle>
 
           <br />
@@ -55,68 +54,35 @@ export class UserPassUserEdit extends Component<DefaultPageProps, { user_data: U
           </Margin>
 
           <InputWithTitle title={i18next.t("common_cidrs")}>
-            <input
+            <TextInput name="cidrs" value={user_data.token_bound_cidrs.join()} />
-              class="uk-input uk-form-width-large"
-              name="cidrs"
-              type="text"
-              value={user_data.token_bound_cidrs.join()}
-            />
           </InputWithTitle>
+
           <InputWithTitle title={i18next.t("common_exp_max_ttl")}>
-            <input
+            <NumberInput name="exp_max_ttl" value={toStr(user_data.token_explicit_max_ttl)} />
-              class="uk-input uk-form-width-large"
-              name="exp_max_ttl"
-              type="number"
-              value={toStr(user_data.token_explicit_max_ttl)}
-            />
           </InputWithTitle>
+
           <InputWithTitle title={i18next.t("common_max_ttl")}>
-            <input
+            <NumberInput name="max_ttl" value={toStr(user_data.token_max_ttl)} />
-              class="uk-input uk-form-width-large"
-              name="max_ttl"
-              type="number"
-              value={toStr(user_data.token_max_ttl)}
-            />
           </InputWithTitle>
+
           <InputWithTitle title={i18next.t("auth_common_default_policy_attached")}>
-            <input
+            <Checkbox name="def_pol_attached" checked={user_data.token_no_default_policy} />
-              class="uk-checkbox"
-              name="def_pol_attached"
-              type="checkbox"
-              value={toStr(user_data.token_no_default_policy)}
-            />
           </InputWithTitle>
+
           <InputWithTitle title={i18next.t("auth_common_max_token_uses")}>
-            <input
+            <NumberInput name="max_uses" value={toStr(user_data.token_num_uses)} />
-              class="uk-input uk-form-width-large"
-              name="max_uses"
-              type="number"
-              value={toStr(user_data.token_num_uses)}
-            />
           </InputWithTitle>
+
           <InputWithTitle title={i18next.t("auth_common_token_peroid")}>
-            <input
+            <NumberInput name="period" value={toStr(user_data.token_period)} />
-              class="uk-input uk-form-width-large"
-              name="period"
-              type="number"
-              value={toStr(user_data.token_period)}
-            />
           </InputWithTitle>
+
           <InputWithTitle title={i18next.t("auth_common_policies")}>
-            <input
+            <TextInput name="policies" value={user_data.token_policies.join()} />
-              class="uk-input uk-form-width-large"
-              name="policies"
-              type="text"
-              value={user_data.token_policies.join()}
-            />
           </InputWithTitle>
+
           <InputWithTitle title={i18next.t("common_initial_ttl")}>
-            <input
+            <NumberInput name="initial_ttl" value={toStr(user_data.token_ttl)} />
-              class="uk-input uk-form-width-large"
-              name="initial_ttl"
-              type="number"
-              value={toStr(user_data.token_ttl)}
-            />
           </InputWithTitle>
 
           <Margin>

src/ui/pages/Access/Auth/userpass/UserPassUserNew.tsx

@@ -2,7 +2,7 @@ import { Button } from "../../../../elements/Button";
 import { Component, createRef } from "preact";
 import { DefaultPageProps } from "../../../../../types/DefaultPageProps";
 import { ErrorMessage } from "../../../../elements/ErrorMessage";
-import { Form } from "../../../../elements/Form";
+import { Form } from "../../../../elements/forms/Form";
 import { Margin } from "../../../../elements/Margin";
 import { MarginInline } from "../../../../elements/MarginInline";
 import { PageTitle } from "../../../../elements/PageTitle";
@@ -10,6 +10,9 @@ import { UserType } from "../../../../../api/types/user";
 import { route } from "preact-router";
 import { userPassUserViewURL } from "../../../pageLinks";
 import i18next from "i18next";
+import { TextInput } from "../../../../elements/forms/TextInput";
+import { InputWithTitle } from "../../../../elements/InputWithTitle";
+import { PasswordInput } from "../../../../elements/forms/PasswordInput";
 
 export class UserPassUserNew extends Component<DefaultPageProps> {
   errorMessageRef = createRef<ErrorMessage>();
@@ -20,20 +23,15 @@ export class UserPassUserNew extends Component<DefaultPageProps> {
         <PageTitle title={i18next.t("userpass_user_new_title")} />
         <Form onSubmit={(data) => this.onSubmit(data)}>
           <Margin>
-            <input
+            <InputWithTitle title={i18next.t("common_username")}>
-              class="uk-input uk-form-width-large"
+              <TextInput name="username" />
-              name="username"
+            </InputWithTitle>
-              type="text"
-              placeholder={i18next.t("common_username")}
-            />
           </Margin>
+
           <Margin>
-            <input
+            <InputWithTitle title={i18next.t("common_password")}>
-              class="uk-input uk-form-width-large"
+              <PasswordInput name="password" />
-              name="password"
+            </InputWithTitle>
-              type="password"
-              placeholder={i18next.t("common_password")}
-            />
           </Margin>
 
           <Margin>

src/ui/pages/Login_Token.tsx

@@ -2,11 +2,13 @@ import { Button } from "../elements/Button";
 import { Component, JSX, createRef } from "preact";
 import { DefaultPageProps } from "../../types/DefaultPageProps";
 import { ErrorMessage } from "../elements/ErrorMessage";
-import { Form } from "../elements/Form";
+import { Form } from "../elements/forms/Form";
 import { Margin } from "../elements/Margin";
 import { MarginInline } from "../elements/MarginInline";
 import { route } from "preact-router";
 import i18next from "i18next";
+import { PasswordInput } from "../elements/forms/PasswordInput";
+import { InputWithTitle } from "../elements/InputWithTitle";
 
 export class TokenLoginForm extends Component<DefaultPageProps> {
   errorMessageRef = createRef<ErrorMessage>();
@@ -15,14 +17,9 @@ export class TokenLoginForm extends Component<DefaultPageProps> {
     return (
       <Form onSubmit={(data) => this.onSubmit(data)}>
         <Margin>
-          <input
+          <InputWithTitle title={i18next.t("log_in_token_input")}>
-            class="uk-input uk-form-width-medium"
+            <PasswordInput name="token" required />
-            id="tokenInput"
+          </InputWithTitle>
-            name="token"
-            type="password"
-            placeholder={i18next.t("log_in_token_input")}
-            required
-          />
         </Margin>
 
         <Margin>
@@ -48,7 +45,6 @@ export class TokenLoginForm extends Component<DefaultPageProps> {
       route("/");
     } catch (e: unknown) {
       const error = e as Error;
-      document.querySelector("#tokenInput").classList.add("uk-form-danger");
 
       let errorMessage: string;
 

src/ui/pages/Login_Username.tsx

@@ -2,11 +2,14 @@ import { Button } from "../elements/Button";
 import { Component, JSX, createRef } from "preact";
 import { DefaultPageProps } from "../../types/DefaultPageProps";
 import { ErrorMessage } from "../elements/ErrorMessage";
-import { Form } from "../elements/Form";
+import { Form } from "../elements/forms/Form";
 import { Margin } from "../elements/Margin";
 import { MarginInline } from "../elements/MarginInline";
 import { route } from "preact-router";
 import i18next from "i18next";
+import { TextInput } from "../elements/forms/TextInput";
+import { PasswordInput } from "../elements/forms/PasswordInput";
+import { InputWithTitle } from "../elements/InputWithTitle";
 
 export class UsernameLoginForm extends Component<DefaultPageProps> {
   errorMessageRef = createRef<ErrorMessage>();
@@ -15,24 +18,15 @@ export class UsernameLoginForm extends Component<DefaultPageProps> {
     return (
       <Form onSubmit={(data) => this.onSubmit(data)}>
         <Margin>
-          <input
+          <InputWithTitle title={i18next.t("log_in_username_input")}>
-            class="uk-input uk-form-width-medium"
+            <TextInput name="username" required />
-            id="usernameInput"
+          </InputWithTitle>
-            name="username"
-            type="text"
-            placeholder={i18next.t("log_in_username_input")}
-            required
-          />
         </Margin>
+
         <Margin>
-          <input
+          <InputWithTitle title={i18next.t("log_in_password_input")}>
-            class="uk-input uk-form-width-medium"
+            <PasswordInput name="password" required />
-            id="passwordInput"
+          </InputWithTitle>
-            name="password"
-            type="password"
-            placeholder={i18next.t("log_in_password_input")}
-            required
-          />
         </Margin>
 
         <Margin>
@@ -58,8 +52,6 @@ export class UsernameLoginForm extends Component<DefaultPageProps> {
       route("/");
     } catch (e: unknown) {
       const error = e as Error;
-      document.querySelector("#usernameInput").classList.add("uk-form-danger");
-      document.querySelector("#passwordInput").classList.add("uk-form-danger");
       this.errorMessageRef.current.setErrorMessage(error.message);
       this.props.settings.token = previousToken;
     }

src/ui/pages/Policies/PolicyNew.tsx

@@ -2,12 +2,14 @@ import { Button } from "../../elements/Button";
 import { Component, createRef } from "preact";
 import { DefaultPageProps } from "../../../types/DefaultPageProps";
 import { ErrorMessage } from "../../elements/ErrorMessage";
-import { Form } from "../../elements/Form";
+import { Form } from "../../elements/forms/Form";
 import { Margin } from "../../elements/Margin";
 import { PageTitle } from "../../elements/PageTitle";
 import { policyViewURL } from "../pageLinks";
 import { route } from "preact-router";
 import i18next from "i18next";
+import { TextInput } from "../../elements/forms/TextInput";
+import { InputWithTitle } from "../../elements/InputWithTitle";
 
 export class PolicyNew extends Component<DefaultPageProps> {
   errorMessageRef = createRef<ErrorMessage>();
@@ -46,12 +48,9 @@ export class PolicyNew extends Component<DefaultPageProps> {
         <div>
           <Form onSubmit={async (formData) => await this.onFormSubmit(formData)}>
             <Margin>
-              <input
+              <InputWithTitle title={i18next.t("common_name")}>
-                class="uk-input uk-form-width-medium"
+                <TextInput name="name" required />
-                name="name"
+              </InputWithTitle>
-                placeholder={i18next.t("common_name")}
-                required
-              />
             </Margin>
 
             <Margin>

src/ui/pages/PwGen.tsx

@@ -2,10 +2,11 @@ import { Button } from "../elements/Button";
 import { Component, JSX, createRef } from "preact";
 import { CopyableInputBox } from "../elements/CopyableInputBox";
 import { DefaultPageProps } from "../../types/DefaultPageProps";
-import { Form } from "../elements/Form";
+import { Form } from "../elements/forms/Form";
 import { Margin } from "../elements/Margin";
 import { PageTitle } from "../elements/PageTitle";
 import i18next from "i18next";
+import { Select, SelectOption } from "../elements/forms/Select";
 
 const passwordLengthMin = 1;
 const passwordLengthMax = 64;
@@ -100,7 +101,7 @@ export class PasswordGenerator extends Component<DefaultPageProps, PasswordGener
           </Margin>
           <Margin>
             <input
-              class="uk-range uk-width-1-2"
+              class="uk-range"
               name="length"
               type="range"
               value={this.state.length}
@@ -113,17 +114,16 @@ export class PasswordGenerator extends Component<DefaultPageProps, PasswordGener
             />
           </Margin>
           <Margin>
-            <select
+            <Select
-              class="uk-select uk-width-1-2"
+              selectRef={this.alphabetSelector}
-              ref={this.alphabetSelector}
+              onChange={() => {
-              onInput={() => {
                 this.updateAlphabet();
               }}
             >
-              <option value={alphabets.SECURE}>a-z a-Z 0-9 specials</option>
+              <SelectOption name="a-z a-Z 0-9 specials" value={alphabets.SECURE} />
-              <option value={alphabets.SMOL}>a-z 0-9</option>
+              <SelectOption name="a-z 0-9" value={alphabets.SMOL} />
-              <option value={alphabets.HEX}>A-F 1-9</option>
+              <SelectOption name="A-F 1-9" value={alphabets.HEX} />
-            </select>
+            </Select>
           </Margin>
 
           <CopyableInputBox

src/ui/pages/Secrets/DeleteSecretsEngine.tsx

@@ -2,7 +2,7 @@ import { Button } from "../../elements/Button";
 import { Component, createRef } from "preact";
 import { DefaultPageProps } from "../../../types/DefaultPageProps";
 import { ErrorMessage } from "../../elements/ErrorMessage";
-import { Form } from "../../elements/Form";
+import { Form } from "../../elements/forms/Form";
 import { Margin } from "../../elements/Margin";
 import { MarginInline } from "../../elements/MarginInline";
 import { PageTitle } from "../../elements/PageTitle";

src/ui/pages/Secrets/KeyValue/KeyValueEdit.tsx

@@ -14,6 +14,7 @@ import {
 } from "../../../../utils/dataInterchange";
 import { sortedObjectMap } from "../../../../utils";
 import i18next from "i18next";
+import { Select, SelectOption } from "../../../elements/forms/Select";
 
 export type KVEditProps = DefaultPageProps & {
   baseMount: string;
@@ -112,23 +113,22 @@ export class KVEditor extends Component<KVEditProps, KVEditState> {
     return (
       <div>
         <InputWithTitle title={i18next.t("kv_sec_edit_syntax")}>
-          <select
+          <Select
-            ref={this.syntaxSelectRef}
+            selectRef={this.syntaxSelectRef}
-            class="uk-select uk-form-width-medium"
             onChange={() => {
               this.setState({ syntax: this.syntaxSelectRef.current.value });
             }}
           >
             {SupportedLanguages.map((lang) => {
               return (
-                <option
+                <SelectOption
-                  label={lang.readable}
+                  name={lang.readable}
                   value={lang.name}
                   selected={this.props.settings.kvEditorDefaultLanguage == lang.name}
                 />
               );
             })}
-          </select>
+          </Select>
         </InputWithTitle>
 
         <Margin>

src/ui/pages/Secrets/KeyValue/KeyValueList.tsx

@@ -7,6 +7,8 @@ import { delSecretsEngineURL, kvListURL, kvNewURL, kvViewURL } from "../../pageL
 import { route } from "preact-router";
 import { sendErrorNotification } from "../../../elements/ErrorMessage";
 import i18next from "i18next";
+import { TextInput } from "../../../elements/forms/TextInput";
+import { Margin } from "../../../elements/Margin";
 
 export type KVKeysListProps = DefaultPageProps & {
   baseMount: string;
@@ -95,7 +97,7 @@ export class KVKeysList extends Component<KVKeysListProps, KVKeysListState> {
     }
   }
 
-  searchBarRef = createRef();
+  searchBarRef = createRef<HTMLInputElement>();
 
   render(): JSX.Element {
     if (!this.state.dataLoaded) {
@@ -108,28 +110,32 @@ export class KVKeysList extends Component<KVKeysListProps, KVKeysListState> {
 
     return (
       <>
-        <input
+        <Margin>
-          ref={this.searchBarRef}
+          <TextInput
-          class="uk-input uk-form-width-medium uk-margin-bottom"
+            inputRef={this.searchBarRef}
-          name="path"
+            name="path"
-          placeholder={i18next.t("kv_view_search_input_text")}
+            placeholder={i18next.t("kv_view_search_input_text")}
-          onInput={async () => {
+            onChange={async () => {
-            this.setState({
+              this.setState({
-              searchQuery: (this.searchBarRef.current as unknown as HTMLInputElement).value,
+                searchQuery: this.searchBarRef.current.value,
-            });
+              });
-          }}
+            }}
-        />
+          />
+        </Margin>
+
         <br />
 
-        <ul class="uk-nav uk-nav-default">
+        <Margin>
-          {...((): JSX.Element[] => {
+          <ul class="uk-nav uk-nav-default">
-            let secrets: string[] = this.state.keys;
+            {...((): JSX.Element[] => {
-            if (this.state.searchQuery.length > 0) {
+              let secrets: string[] = this.state.keys;
-              secrets = secrets.filter((secret) => secret.includes(this.state.searchQuery));
+              if (this.state.searchQuery.length > 0) {
-            }
+                secrets = secrets.filter((secret) => secret.includes(this.state.searchQuery));
-            return SecretsList(this.props.baseMount, this.props.secretPath, secrets);
+              }
-          })()}
+              return SecretsList(this.props.baseMount, this.props.secretPath, secrets);
-        </ul>
+            })()}
+          </ul>
+        </Margin>
       </>
     );
   }

src/ui/pages/Secrets/KeyValue/KeyValueNew.tsx

@@ -2,12 +2,14 @@ import { Button } from "../../../elements/Button";
 import { Component, createRef } from "preact";
 import { DefaultPageProps } from "../../../../types/DefaultPageProps";
 import { ErrorMessage } from "../../../elements/ErrorMessage";
-import { Form } from "../../../elements/Form";
+import { Form } from "../../../elements/forms/Form";
 import { Margin } from "../../../elements/Margin";
 import { SecretTitleElement } from "../SecretTitleElement";
 import { kvViewURL } from "../../pageLinks";
 import { route } from "preact-router";
 import i18next from "i18next";
+import { TextInput } from "../../../elements/forms/TextInput";
+import { InputWithTitle } from "../../../elements/InputWithTitle";
 
 export class KeyValueNew extends Component<DefaultPageProps> {
   errorMessageRef = createRef<ErrorMessage>();
@@ -55,12 +57,9 @@ export class KeyValueNew extends Component<DefaultPageProps> {
             }
           >
             <Margin>
-              <input
+              <InputWithTitle title={i18next.t("kv_new_path")}>
-                class="uk-input uk-form-width-medium"
+                <TextInput name="path" required />
-                name="path"
+              </InputWithTitle>
-                placeholder={i18next.t("kv_new_path")}
-                required
-              />
             </Margin>
 
             <Margin>

src/ui/pages/Secrets/KeyValue/KeyValueView.tsx

@@ -12,6 +12,7 @@ import { kvDeleteURL, kvEditURL, kvVersionsURL } from "../../pageLinks";
 import { sendErrorNotification } from "../../../elements/ErrorMessage";
 import { sortedObjectMap } from "../../../../utils";
 import i18next from "i18next";
+import { Select, SelectOption } from "../../../elements/forms/Select";
 
 type KVSecretViewDataProps = DefaultPageProps & { data: Map<string, unknown> };
 
@@ -24,23 +25,22 @@ export class KVSecretCodeVew extends Component<KVSecretViewDataProps, { syntax:
     return (
       <>
         <InputWithTitle title={i18next.t("kv_secret_syntax")}>
-          <select
+          <Select
-            ref={this.syntaxSelectRef}
+            selectRef={this.syntaxSelectRef}
-            class="uk-select uk-form-width-medium"
             onChange={() => {
               this.setState({ syntax: this.syntaxSelectRef.current.value });
             }}
           >
             {SupportedLanguages.map((lang) => {
               return (
-                <option
+                <SelectOption
-                  label={lang.readable}
+                  name={lang.readable}
                   value={lang.name}
                   selected={this.props.settings.kvViewDefaultLanguage == lang.name}
                 />
               );
             })}
-          </select>
+          </Select>
         </InputWithTitle>
         <CodeBlock language={toPrismCode(syntax)} code={codeData} />
       </>

src/ui/pages/Secrets/NewEngines/NewKVEngine.tsx

@@ -2,13 +2,15 @@ import { Button } from "../../../elements/Button";
 import { Component, createRef } from "preact";
 import { DefaultPageProps } from "../../../../types/DefaultPageProps";
 import { ErrorMessage } from "../../../elements/ErrorMessage";
-import { Form } from "../../../elements/Form";
+import { Form } from "../../../elements/forms/Form";
 import { Margin } from "../../../elements/Margin";
 import { MarginInline } from "../../../elements/MarginInline";
 import { PageTitle } from "../../../elements/PageTitle";
 import { kvListURL } from "../../pageLinks";
 import { route } from "preact-router";
 import i18next from "i18next";
+import { Select, SelectOption } from "../../../elements/forms/Select";
+import { TextInput } from "../../../elements/forms/TextInput";
 
 export class NewKVEngine extends Component<DefaultPageProps> {
   errorMessageRef = createRef<ErrorMessage>();
@@ -19,23 +21,17 @@ export class NewKVEngine extends Component<DefaultPageProps> {
         <PageTitle title={i18next.t("new_kv_engine_title")} />
         <Form onSubmit={(data) => this.submit(data)}>
           <Margin>
-            <input
+            <TextInput
-              class="uk-input uk-form-width-medium"
               name="name"
-              type="text"
               placeholder={i18next.t("common_name")}
               required
             />
           </Margin>
           <Margin>
-            <select class="uk-input uk-form-width-medium" name="version">
+            <Select name="version">
-              <option label={i18next.t("new_kv_engine_version_2")} value="2">
+              <SelectOption name={i18next.t("new_kv_engine_version_2")} value="2" />
-                {i18next.t("new_kv_engine_version_2")}
+              <SelectOption name={i18next.t("new_kv_engine_version_1")} value="1" />
-              </option>
+            </Select>
-              <option label={i18next.t("new_kv_engine_version_1")} value="1">
-                {i18next.t("new_kv_engine_version_1")}
-              </option>
-            </select>
           </Margin>
 
           <Margin>

src/ui/pages/Secrets/NewEngines/NewTOTPEngine.tsx

@@ -2,13 +2,14 @@ import { Button } from "../../../elements/Button";
 import { Component, createRef } from "preact";
 import { DefaultPageProps } from "../../../../types/DefaultPageProps";
 import { ErrorMessage } from "../../../elements/ErrorMessage";
-import { Form } from "../../../elements/Form";
+import { Form } from "../../../elements/forms/Form";
 import { Margin } from "../../../elements/Margin";
 import { MarginInline } from "../../../elements/MarginInline";
 import { PageTitle } from "../../../elements/PageTitle";
 import { route } from "preact-router";
 import { totpListURL } from "../../pageLinks";
 import i18next from "i18next";
+import { TextInput } from "../../../elements/forms/TextInput";
 
 export class NewTOTPEngine extends Component<DefaultPageProps> {
   errorMessageRef = createRef<ErrorMessage>();
@@ -19,10 +20,8 @@ export class NewTOTPEngine extends Component<DefaultPageProps> {
         <PageTitle title={i18next.t("new_totp_engine_title")} />
         <Form onSubmit={(data) => this.submit(data)}>
           <Margin>
-            <input
+            <TextInput
-              class="uk-input uk-form-width-medium"
               name="name"
-              type="text"
               placeholder={i18next.t("common_name")}
               required
             />

src/ui/pages/Secrets/NewEngines/NewTransitEngine.tsx

@@ -2,12 +2,13 @@ import { Button } from "../../../elements/Button";
 import { Component, createRef } from "preact";
 import { DefaultPageProps } from "../../../../types/DefaultPageProps";
 import { ErrorMessage } from "../../../elements/ErrorMessage";
-import { Form } from "../../../elements/Form";
+import { Form } from "../../../elements/forms/Form";
 import { Margin } from "../../../elements/Margin";
 import { MarginInline } from "../../../elements/MarginInline";
 import { PageTitle } from "../../../elements/PageTitle";
 import { route } from "preact-router";
 import i18next from "i18next";
+import { TextInput } from "../../../elements/forms/TextInput";
 
 export class NewTransitEngine extends Component<DefaultPageProps> {
   errorMessageRef = createRef<ErrorMessage>();
@@ -18,10 +19,8 @@ export class NewTransitEngine extends Component<DefaultPageProps> {
         <PageTitle title={i18next.t("new_transit_engine_title")} />
         <Form onSubmit={(data) => this.submit(data)}>
           <Margin>
-            <input
+            <TextInput
-              class="uk-input uk-form-width-medium"
               name="name"
-              type="text"
               placeholder={i18next.t("common_name")}
               required
             />

src/ui/pages/Secrets/TOTP/TOTPNew.tsx

@@ -2,13 +2,14 @@ import { Button } from "../../../elements/Button";
 import { Component, JSX, createRef } from "preact";
 import { DefaultPageProps } from "../../../../types/DefaultPageProps";
 import { ErrorMessage } from "../../../elements/ErrorMessage";
-import { Form } from "../../../elements/Form";
+import { Form } from "../../../elements/forms/Form";
 import { Margin } from "../../../elements/Margin";
 import { MarginInline } from "../../../elements/MarginInline";
 import { QRScanner } from "../../../elements/QRScanner";
 import { SecretTitleElement } from "../SecretTitleElement";
 import { route } from "preact-router";
 import i18next from "i18next";
+import { TextInput } from "../../../elements/forms/TextInput";
 
 function replaceAll(str: string, replace: string, replaceWith: string): string {
   return str.replace(new RegExp(replace, "g"), replaceWith);
@@ -55,11 +56,9 @@ export class TOTPNewForm extends Component<
     return (
       <Form onSubmit={(data) => this.onSubmit(data)}>
         <Margin>
-          <input
+          <TextInput
-            ref={this.nameInputRef}
+            inputRef={this.nameInputRef}
-            class="uk-input uk-form-width-medium"
             name="name"
-            type="text"
             placeholder={i18next.t("common_name")}
             required
           />
@@ -70,21 +69,15 @@ export class TOTPNewForm extends Component<
         {!this.state.qrMode && (
           <>
             <Margin>
-              <input
+              <TextInput
-                class="uk-input uk-form-width-medium"
                 name="key"
-                type="text"
-                hidden={this.state.qrMode}
                 placeholder={i18next.t("totp_new_key_input")}
               />
             </Margin>
 
             <Margin>
-              <input
+              <TextInput
-                class="uk-input uk-form-width-medium"
                 name="uri"
-                type="text"
-                hidden={this.state.qrMode}
                 placeholder={i18next.t("totp_new_uri_input")}
               />
             </Margin>

src/ui/pages/Secrets/TOTP/TOTPNewGenerated.tsx

@@ -3,7 +3,7 @@ import { Component, JSX, createRef } from "preact";
 import { CopyableInputBox } from "../../../elements/CopyableInputBox";
 import { DefaultPageProps } from "../../../../types/DefaultPageProps";
 import { ErrorMessage } from "../../../elements/ErrorMessage";
-import { Form } from "../../../elements/Form";
+import { Form } from "../../../elements/forms/Form";
 import { InputWithTitle } from "../../../elements/InputWithTitle";
 import { Margin } from "../../../elements/Margin";
 import { MarginInline } from "../../../elements/MarginInline";
@@ -12,6 +12,10 @@ import { SecretTitleElement } from "../SecretTitleElement";
 import { route } from "preact-router";
 import { totpListURL } from "../../pageLinks";
 import i18next from "i18next";
+import { NumberInput } from "../../../elements/forms/NumberInput";
+import { TextInput } from "../../../elements/forms/TextInput";
+import { Checkbox } from "../../../elements/forms/Checkbox";
+import { Select, SelectOption, } from "../../../elements/forms/Select";
 
 export class TOTPNewGeneratedForm extends Component<
   { baseMount: string } & DefaultPageProps,
@@ -26,10 +30,8 @@ export class TOTPNewGeneratedForm extends Component<
         <Form onSubmit={(data) => this.onSubmit(data)}>
           <Margin>
             <InputWithTitle title={i18next.t("common_name")}>
-              <input
+              <TextInput
-                class="uk-input uk-form-width-medium"
                 name="name"
-                type="text"
                 placeholder={i18next.t("common_name")}
                 required
               />
@@ -38,59 +40,47 @@ export class TOTPNewGeneratedForm extends Component<
 
           <Margin>
             <InputWithTitle title={i18next.t("totp_new_generated_issuer")}>
-              <input class="uk-input uk-form-width-medium" name="issuer" type="text" required />
+              <TextInput name="issuer" required />
             </InputWithTitle>
           </Margin>
 
           <Margin>
             <InputWithTitle title={i18next.t("totp_new_generated_account_name")}>
-              <input
+              <TextInput name="account_name" required />
-                class="uk-input uk-form-width-medium"
-                name="account_name"
-                type="text"
-                required
-              />
             </InputWithTitle>
           </Margin>
 
           <Margin>
             <InputWithTitle title={i18next.t("totp_new_generated_algorithm")}>
-              <select class="uk-select uk-form-width-medium" name="algorithm">
+              <Select name="algorithm">
                 {["SHA512", "SHA256", "SHA1"].map((type) => (
-                  <option label={type} value={type}>
+                  <SelectOption name={type} value={type} />
-                    {type}
-                  </option>
                 ))}
-              </select>
+              </Select>
             </InputWithTitle>
           </Margin>
 
           <Margin>
             <InputWithTitle title={i18next.t("totp_new_generated_key_size")}>
-              <input
+              <NumberInput name="key_size" value="20" />
-                class="uk-input uk-form-width-medium"
-                name="key_size"
-                type="number"
-                value="20"
-              />
             </InputWithTitle>
           </Margin>
 
           <Margin>
             <InputWithTitle title={i18next.t("totp_new_generated_period")}>
-              <input class="uk-input uk-form-width-medium" name="period" type="text" value="30s" />
+              <TextInput name="period" value="30s" />
             </InputWithTitle>
           </Margin>
 
           <Margin>
             <InputWithTitle title={i18next.t("totp_new_generated_digits")}>
-              <input class="uk-input uk-form-width-medium" name="digits" type="number" value="6" />
+              <NumberInput name="digits" value="6" />
             </InputWithTitle>
           </Margin>
 
           <Margin>
             <InputWithTitle title={i18next.t("totp_new_generated_export")}>
-              <input class="uk-checkbox" name="exported" type="checkbox" value="yes" checked />
+              <Checkbox name="exported" checked />
             </InputWithTitle>
           </Margin>
 

src/ui/pages/Secrets/Transit/TransitDecrypt.tsx

@@ -4,12 +4,14 @@ import { CopyableBox } from "../../../elements/CopyableBox";
 import { DefaultPageProps } from "../../../../types/DefaultPageProps";
 import { ErrorMessage } from "../../../elements/ErrorMessage";
 import { FileUploadInput } from "../../../elements/FileUploadInput";
-import { Form } from "../../../elements/Form";
+import { Form } from "../../../elements/forms/Form";
 import { InputWithTitle } from "../../../elements/InputWithTitle";
 import { Margin } from "../../../elements/Margin";
 import { SecretTitleElement } from "../SecretTitleElement";
 import { fileToBase64 } from "../../../../utils/fileToBase64";
 import i18next from "i18next";
+import { Checkbox } from "../../../elements/forms/Checkbox";
+import { TextArea } from "../../../elements/forms/TextArea";
 
 export class TransitDecrypt extends Component<DefaultPageProps, { plaintext: string }> {
   errorMessageRef = createRef<ErrorMessage>();
@@ -33,17 +35,18 @@ export class TransitDecrypt extends Component<DefaultPageProps, { plaintext: str
           {title}
           <Form onSubmit={async (data) => await this.onSubmit(data)}>
             <Margin>
-              <textarea
+              <TextArea
-                class="uk-textarea uk-form-width-medium"
                 name="ciphertext"
                 placeholder={i18next.t("transit_decrypt_input_placeholder")}
               />
             </Margin>
+
             <Margin>
               <FileUploadInput name="ciphertext_file" />
             </Margin>
+
             <InputWithTitle title={i18next.t("transit_decrypt_decode_checkbox")}>
-              <input class="uk-checkbox" name="decodeBase64Checkbox" type="checkbox" />
+              <Checkbox name="decodeBase64Checkbox" />
             </InputWithTitle>
 
             <Margin>

src/ui/pages/Secrets/Transit/TransitEncrypt.tsx

@@ -4,12 +4,14 @@ import { CopyableBox } from "../../../elements/CopyableBox";
 import { DefaultPageProps } from "../../../../types/DefaultPageProps";
 import { ErrorMessage } from "../../../elements/ErrorMessage";
 import { FileUploadInput } from "../../../elements/FileUploadInput";
-import { Form } from "../../../elements/Form";
+import { Form } from "../../../elements/forms/Form";
 import { InputWithTitle } from "../../../elements/InputWithTitle";
 import { Margin } from "../../../elements/Margin";
 import { SecretTitleElement } from "../SecretTitleElement";
 import { fileToBase64 } from "../../../../utils/fileToBase64";
 import i18next from "i18next";
+import { Checkbox } from "../../../elements/forms/Checkbox";
+import { TextArea } from "../../../elements/forms/TextArea";
 
 export class TransitEncrypt extends Component<DefaultPageProps, { ciphertext: string }> {
   errorMessageRef = createRef<ErrorMessage>();
@@ -33,17 +35,18 @@ export class TransitEncrypt extends Component<DefaultPageProps, { ciphertext: st
           {title}
           <Form onSubmit={async (data) => await this.onSubmit(data)}>
             <Margin>
-              <textarea
+              <TextArea
-                class="uk-textarea uk-form-width-medium"
                 name="plaintext"
                 placeholder={i18next.t("transit_encrypt_input_placeholder")}
               />
             </Margin>
+
             <Margin>
               <FileUploadInput name="plaintext_file" />
             </Margin>
+
             <InputWithTitle title={i18next.t("transit_encrypt_already_encoded_checkbox")}>
-              <input class="uk-checkbox" name="base64Checkbox" type="checkbox" />
+              <Checkbox name="base64Checkbox" />
             </InputWithTitle>
 
             <Margin>

src/ui/pages/Secrets/Transit/TransitNew.tsx

@@ -2,13 +2,16 @@ import { Button } from "../../../elements/Button";
 import { Component, createRef } from "preact";
 import { DefaultPageProps } from "../../../../types/DefaultPageProps";
 import { ErrorMessage } from "../../../elements/ErrorMessage";
-import { Form } from "../../../elements/Form";
+import { Form } from "../../../elements/forms/Form";
 import { Margin } from "../../../elements/Margin";
 import { MarginInline } from "../../../elements/MarginInline";
 import { SecretTitleElement } from "../SecretTitleElement";
 import { route } from "preact-router";
 import { transitViewSecretURL } from "../../pageLinks";
 import i18next from "i18next";
+import { TextInput } from "../../../elements/forms/TextInput";
+import { InputWithTitle } from "../../../elements/InputWithTitle";
+import { Select, SelectOption } from "../../../elements/forms/Select";
 
 export class TransitNew extends Component<DefaultPageProps> {
   errorMessageRef = createRef<ErrorMessage>();
@@ -29,16 +32,12 @@ export class TransitNew extends Component<DefaultPageProps> {
           }}
         >
           <Margin>
-            <input
+            <InputWithTitle title={i18next.t("common_name")}>
-              class="uk-input uk-form-width-medium"
+              <TextInput name="name" required />
-              name="name"
+            </InputWithTitle>
-              placeholder={i18next.t("common_name")}
-              type="text"
-              required
-            />
           </Margin>
           <Margin>
-            <select class="uk-select uk-form-width-medium" name="type">
+            <Select name="type">
               {[
                 "aes128-gcm96",
                 "aes256-gcm96",
@@ -51,11 +50,9 @@ export class TransitNew extends Component<DefaultPageProps> {
                 "rsa-3072",
                 "rsa-4096",
               ].map((type) => (
-                <option label={type} value={type}>
+                <SelectOption name={type} value={type} />
-                  {type}
-                </option>
               ))}
-            </select>
+            </Select>
           </Margin>
 
           <Margin>

src/ui/pages/Secrets/Transit/TransitRewrap.tsx

@@ -3,12 +3,14 @@ import { Component, createRef } from "preact";
 import { CopyableBox } from "../../../elements/CopyableBox";
 import { DefaultPageProps } from "../../../../types/DefaultPageProps";
 import { ErrorMessage, sendErrorNotification } from "../../../elements/ErrorMessage";
-import { Form } from "../../../elements/Form";
+import { Form } from "../../../elements/forms/Form";
 import { Margin } from "../../../elements/Margin";
 import { SecretTitleElement } from "../SecretTitleElement";
 import { TransitKeyType } from "../../../../api/types/transit";
 import { objectToMap } from "../../../../utils";
 import i18next from "i18next";
+import { Select, SelectOption } from "../../../elements/forms/Select";
+import { TextArea } from "../../../elements/forms/TextArea";
 
 type versionOption = { version: string; label: string };
 
@@ -75,17 +77,14 @@ export class TransitRewrap extends Component<DefaultPageProps, TransitRewrapStat
           {title}
           <Form onSubmit={async (data) => await this.onSubmit(data)}>
             <Margin>
-              <select class="uk-select uk-width-1-2" name="version">
+              <Select name="version">
                 {options.map((option) => (
-                  <option label={option.label} value={option.version}>
+                  <SelectOption name={option.label} value={option.version} />
-                    {option.label}
-                  </option>
                 ))}
-              </select>
+              </Select>
             </Margin>
             <Margin>
-              <textarea
+              <TextArea
-                class="uk-textarea uk-width-1-2"
                 name="ciphertext"
                 placeholder={i18next.t("transit_rewrap_input_placeholder")}
               />

src/ui/pages/SetLanguage.tsx

@@ -5,13 +5,14 @@ import translations from "../../translations/index.mjs";
 import { Button } from "../elements/Button";
 import { Component } from "preact";
 import { DefaultPageProps } from "../../types/DefaultPageProps";
-import { Form } from "../elements/Form";
+import { Form } from "../elements/forms/Form";
 import { Margin } from "../elements/Margin";
 import { MarginInline } from "../elements/MarginInline";
 import { PageTitle } from "../elements/PageTitle";
 import { getTranslationCompletePercentage } from "../../utils/translationUtils";
 import { route } from "preact-router";
 import i18next from "i18next";
+import { Select, SelectOption } from "../elements/forms/Select.js";
 
 export class SetLanguage extends Component<DefaultPageProps> {
   render() {
@@ -20,15 +21,20 @@ export class SetLanguage extends Component<DefaultPageProps> {
         <PageTitle title={i18next.t("set_language_title")} />
         <Form onSubmit={(data) => this.onSubmit(data)}>
           <Margin>
-            <select class="uk-select uk-form-width-large" name="language">
+            <Select name="language">
-              {Object.getOwnPropertyNames(translations).map((languageID) => (
+              {Object.getOwnPropertyNames(translations).map((languageID) => {
-                <option value={languageID} selected={this.props.settings.language == languageID}>
+                let languageName = i18next.getFixedT(languageID, null)("language_name");
-                  {i18next.getFixedT(languageID, null)("language_name") +
+                let languageCompletionPercent = getTranslationCompletePercentage(languageID);
-                    " " +
+                let name = `${languageName} (${languageCompletionPercent})`
-                    ("(" + getTranslationCompletePercentage(languageID) + ")")}
+                return (
-                </option>
+                  <SelectOption
-              ))}
+                    name={name}
-            </select>
+                    value={languageID}
+                    selected={this.props.settings.language == languageID}
+                  />
+                );
+              })}
+            </Select>
           </Margin>
           <p class="uk-text-danger" id="errorText" />
           <MarginInline>

src/ui/pages/SetVaultURL.tsx

@@ -1,11 +1,13 @@
 import { Button } from "../elements/Button";
 import { Component } from "preact";
 import { DefaultPageProps } from "../../types/DefaultPageProps";
-import { Form } from "../elements/Form";
+import { Form } from "../elements/forms/Form";
 import { Margin } from "../elements/Margin";
 import { PageTitle } from "../elements/PageTitle";
 import { route } from "preact-router";
 import i18next from "i18next";
+import { TextInput } from "../elements/forms/TextInput";
+import { InputWithTitle } from "../elements/InputWithTitle";
 
 export class SetVaultURL extends Component<DefaultPageProps> {
   render() {
@@ -14,13 +16,13 @@ export class SetVaultURL extends Component<DefaultPageProps> {
         <PageTitle title={i18next.t("set_vault_url_title")} />
         <Form onSubmit={(data) => this.onSubmit(data)}>
           <Margin>
-            <input
+            <InputWithTitle title={i18next.t("set_vault_url_placeholder")}>
-              class="uk-input uk-form-width-medium"
+              <TextInput
-              name="vaultURL"
+                name="vaultURL"
-              type="text"
+                placeholder={i18next.t("set_vault_url_placeholder")}
-              placeholder={i18next.t("set_vault_url_placeholder")}
+                required
-              required
+              />
-            />
+            </InputWithTitle>
           </Margin>
 
           <Margin>

src/ui/pages/Settings/GeneralSettings.tsx

@@ -7,6 +7,8 @@ import i18next from "i18next";
 import { getTranslationCompletePercentage } from "../../../utils/translationUtils";
 import { settingsSavedNotification } from "./Settings";
 import translations from "../../../translations/index.mjs";
+import { Select, SelectOption } from "../../elements/forms/Select";
+import { TextInput } from "../../elements/forms/TextInput";
 
 const Themes = [
   { name: "dark", readable: "Dark" },
@@ -25,9 +27,8 @@ export class GeneralSettings extends Component<DefaultPageProps> {
         <h4>{i18next.t("settings_general_title")}</h4>
 
         <InputWithTitle title={i18next.t("settings_general_theme")}>
-          <select
+          <Select
-            ref={this.themeSelectRef}
+            selectRef={this.themeSelectRef}
-            class="uk-select uk-form-width-medium"
             onChange={() => {
               const newTheme = this.themeSelectRef.current.value;
               this.props.settings.theme = newTheme;
@@ -36,20 +37,18 @@ export class GeneralSettings extends Component<DefaultPageProps> {
           >
             {Themes.map((theme) => {
               return (
-                <option
+                <SelectOption
-                  label={theme.readable}
+                  name={theme.readable}
                   value={theme.name}
                   selected={this.props.settings.theme == theme.name}
                 />
               );
             })}
-          </select>
+          </Select>
         </InputWithTitle>
 
         <InputWithTitle title={i18next.t("settings_general_vault_url")}>
-          <input
+          <TextInput
-            ref={this.vaultURLInputRef}
-            class="uk-input uk-form-width-medium"
             value={this.props.settings.apiURL}
             onChange={() => {
               // TODO: check for api health to see if is valid api url.
@@ -60,9 +59,8 @@ export class GeneralSettings extends Component<DefaultPageProps> {
         </InputWithTitle>
 
         <InputWithTitle title={i18next.t("settings_general_language")}>
-          <select
+          <Select
-            ref={this.languageSelectRef}
+            selectRef={this.languageSelectRef}
-            class="uk-select uk-form-width-medium"
             onChange={async () => {
               const language = this.languageSelectRef.current.value;
               this.props.settings.language = language;
@@ -73,20 +71,24 @@ export class GeneralSettings extends Component<DefaultPageProps> {
               settingsSavedNotification();
             }}
           >
-            {Object.getOwnPropertyNames(translations).map((languageID) => (
+            {Object.getOwnPropertyNames(translations).map((languageID) => {
-              <option value={languageID} selected={this.props.settings.language == languageID}>
+              let languageName = i18next.getFixedT(languageID, null)("language_name");
-                {i18next.getFixedT(languageID, null)("language_name") +
+              let languageCompletionPercent = getTranslationCompletePercentage(languageID);
-                  " " +
+              let name = `${languageName} (${languageCompletionPercent})`
-                  ("(" + getTranslationCompletePercentage(languageID) + ")")}
+              return (
-              </option>
+                <SelectOption
-            ))}
+                  name={name}
-          </select>
+                  value={languageID}
+                  selected={this.props.settings.language == languageID}
+                />
+              );
+            })}
+          </Select>
         </InputWithTitle>
 
         <InputWithTitle title={i18next.t("settings_general_page_direction")}>
-          <select
+          <Select
-            ref={this.pageDirectionRef}
+            selectRef={this.pageDirectionRef}
-            class="uk-select uk-form-width-medium"
             onChange={() => {
               this.props.settings.pageDirection = this.pageDirectionRef.current.value;
               document.documentElement.dir = this.props.settings.pageDirection;
@@ -98,14 +100,14 @@ export class GeneralSettings extends Component<DefaultPageProps> {
               { name: "rtl", readable: i18next.t("settings_general_page_direction_rtl") },
             ].map((direction) => {
               return (
-                <option
+                <SelectOption
-                  label={direction.readable}
+                  name={direction.readable}
                   value={direction.name}
                   selected={this.props.settings.pageDirection == direction.name}
                 />
               );
             })}
-          </select>
+          </Select>
         </InputWithTitle>
       </div>
     );

src/ui/pages/Settings/KeyValueSettings.tsx

@@ -4,6 +4,10 @@ import { InputWithTitle } from "../../elements/InputWithTitle";
 import { SupportedLanguages } from "../../../utils/dataInterchange";
 import { settingsSavedNotification } from "./Settings";
 import i18next from "i18next";
+import { Select, SelectOption } from "../../elements/forms/Select";
+import { NumberInput } from "../../elements/forms/NumberInput";
+import { Checkbox } from "../../elements/forms/Checkbox";
+import { TextInput } from "../../elements/forms/TextInput";
 
 export class KeyValueViewSettings extends Component<DefaultPageProps> {
   viewSyntaxSelectRef = createRef<HTMLSelectElement>();
@@ -13,9 +17,8 @@ export class KeyValueViewSettings extends Component<DefaultPageProps> {
       <div>
         {/* KV View Language */}
         <InputWithTitle title={i18next.t("settings_kv_default_view_language")}>
-          <select
+          <Select
-            ref={this.viewSyntaxSelectRef}
+            selectRef={this.viewSyntaxSelectRef}
-            class="uk-select uk-form-width-medium"
             onChange={() => {
               this.props.settings.kvViewDefaultLanguage = this.viewSyntaxSelectRef.current.value;
               settingsSavedNotification();
@@ -23,23 +26,21 @@ export class KeyValueViewSettings extends Component<DefaultPageProps> {
           >
             {SupportedLanguages.map((lang) => {
               return (
-                <option
+                <SelectOption
-                  label={lang.readable}
+                  name={lang.readable}
                   value={lang.name}
                   selected={this.props.settings.kvViewDefaultLanguage == lang.name}
                 />
               );
             })}
-          </select>
+          </Select>
         </InputWithTitle>
 
         {/* KV View Indent */}
         <InputWithTitle title={i18next.t("settings_kv_view_indent")}>
-          <input
+          <NumberInput
-            ref={this.viewIndentInputRef}
+            inputRef={this.viewIndentInputRef}
-            class="uk-input uk-form-width-medium"
+            value={String(this.props.settings.kvViewIndent).toString()}
-            type="number"
-            value={this.props.settings.kvViewIndent}
             onChange={() => {
               const value = this.viewIndentInputRef.current.value;
               const indent = parseInt(value);
@@ -61,9 +62,8 @@ export class KeyValueEditorSettings extends Component<DefaultPageProps> {
       <div>
         {/* KV Editor Language */}
         <InputWithTitle title={i18next.t("settings_kv_default_editor_language")}>
-          <select
+          <Select
-            ref={this.editorSyntaxSelectRef}
+            selectRef={this.editorSyntaxSelectRef}
-            class="uk-select uk-form-width-medium"
             onChange={() => {
               this.props.settings.kvEditorDefaultLanguage =
                 this.editorSyntaxSelectRef.current.value;
@@ -72,23 +72,21 @@ export class KeyValueEditorSettings extends Component<DefaultPageProps> {
           >
             {SupportedLanguages.map((lang) => {
               return (
-                <option
+                <SelectOption
-                  label={lang.readable}
+                  name={lang.readable}
                   value={lang.name}
                   selected={this.props.settings.kvEditorDefaultLanguage == lang.name}
                 />
               );
             })}
-          </select>
+          </Select>
         </InputWithTitle>
 
         {/* KV Editor Indent */}
         <InputWithTitle title={i18next.t("settings_kv_editor_indent")}>
-          <input
+          <NumberInput
-            ref={this.editorIndentInputRef}
+            inputRef={this.editorIndentInputRef}
-            class="uk-input uk-form-width-medium"
+            value={String(this.props.settings.kvEditorIndent).toString()}
-            type="number"
-            value={this.props.settings.kvEditorIndent}
             onChange={() => {
               const value = this.editorIndentInputRef.current.value;
               const indent = parseInt(value);
@@ -116,10 +114,8 @@ export class KeyValueSettings extends Component<DefaultPageProps> {
 
         {/* Always view in code mode */}
         <InputWithTitle title={i18next.t("settings_kv_always_view_in_code_mode")}>
-          <input
+          <Checkbox
-            ref={this.codeModeToggleRef}
+            checkboxRef={this.codeModeToggleRef}
-            class="uk-checkbox"
-            type="checkbox"
             checked={this.props.settings.kvAlwaysCodeView}
             onChange={() => {
               const value = this.codeModeToggleRef.current.checked;
@@ -131,9 +127,8 @@ export class KeyValueSettings extends Component<DefaultPageProps> {
 
         {/* hide values on keys */}
         <InputWithTitle title={i18next.t("settings_kv_hide_values")}>
-          <input
+          <TextInput
-            ref={this.hideKeysRef}
+            inputRef={this.hideKeysRef}
-            class="uk-input"
             value={this.props.settings.kvHideKeyValues.join(",")}
             onChange={() => {
               const value = this.hideKeysRef.current.value;

src/ui/pages/Unseal_Form.tsx

@@ -1,8 +1,10 @@
 import { Button } from "../elements/Button";
-import { Form } from "../elements/Form";
+import { Form } from "../elements/forms/Form";
 import { JSX } from "preact/jsx-runtime";
 import { MarginInline } from "../elements/MarginInline";
 import i18next from "i18next";
+import { PasswordInput } from "../elements/forms/PasswordInput";
+import { InputWithTitle } from "../elements/InputWithTitle";
 
 type FormUnsealProps = {
   onKeySubmit: (key: string) => void;
@@ -10,19 +12,17 @@ type FormUnsealProps = {
 
 export function UnsealForm(props: FormUnsealProps): JSX.Element {
   return (
-    <Form
+    <Form onSubmit={(data: FormData) => {
-      onSubmit={(data: FormData) => {
+      props.onKeySubmit(data.get("unsealKey") as string);
-        props.onKeySubmit(data.get("unsealKey") as string);
+    }}>
-      }}
-    >
       <MarginInline>
-        <input
+        <InputWithTitle title={i18next.t("unseal_key_input_placeholder")}>
-          class="uk-input uk-form-width-medium"
+          <PasswordInput
-          name="unsealKey"
+            name="unsealKey"
-          type="password"
+            placeholder={i18next.t("unseal_key_input_placeholder")}
-          placeholder={i18next.t("unseal_key_input_placeholder")}
+            required
-          required
+          />
-        />
+        </InputWithTitle>
       </MarginInline>
 
       <MarginInline>