Use Input component

Author: mekanix

package-lock.json

@@ -1,6 +1,7 @@
 <script lang="ts">
-  let { label, name, type, value } = $props()
+  let { autofocus = false, required = false, label, name, type, value = $bindable() } = $props()
   let focused = $state(value.length > 0)
+  let input: HTMLElement
 
   const focus = () => {
     focused = true
@@ -12,34 +13,65 @@
     }
   }
 
+  const select = () => {
+    focused = true
+    if (input) {
+      input.focus()
+    }
+  }
+
   $effect(() => {
     focused = value.length > 0
   })
 </script>
 
-<div class="form-group" class:focused>
-  <label class="form-label" for="input">{label}</label>
-  <input class="input" {name} {type} onfocus={focus} onblur={blur} bind:value />
+<div class="root" class:focused>
+  <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
+  <label
+    class="label"
+    for={name}
+    onclick={select}
+    onkeyup={select}
+    onkeydown={select}
+    role="button"
+    tabindex={0}
+  >
+    {label}
+  </label>
+  <!-- svelte-ignore a11y_autofocus -->
+  <input
+    class="input"
+    {autofocus}
+    {required}
+    {name}
+    {type}
+    onfocus={focus}
+    onblur={blur}
+    bind:value
+    bind:this={input}
+  />
 </div>
 
 <style>
-  .form-group {
+  .root {
     position: relative;
+    margin-top: 10px;
   }
 
-  .form-label {
+  .label {
     position: absolute;
     left: 0;
-    top: 10px;
+    top: 12px;
     color: #999;
     background-color: #fff0;
     z-index: 10;
+    cursor: auto;
     transition:
       transform 150ms ease-out,
       font-size 150ms ease-out;
   }
 
-  .focused .form-label {
+  .focused .label {
     transform: translateY(-125%);
     font-size: 0.75em;
   }
@@ -50,6 +82,7 @@
     width: 100%;
     outline: 0;
     border: 0;
+    border-radius: 0px;
     box-shadow: 0 1px 0 0 #e5e5e5;
     transition: box-shadow 150ms ease-out;
 

src/lib/Input.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { goto } from '$app/navigation'
   import { error } from '$lib/notification'
+  import Input from './Input.svelte'
 
   let email = $state('')
   let password = $state('')
@@ -19,14 +20,11 @@
 
 <div class="root">
   <form onsubmit={submit} class="form">
-    <label for="email">Email</label>
-    <!-- svelte-ignore a11y_autofocus -->
-    <input autofocus required type="email" name="email" bind:value={email} />
-
-    <label for="password">Password</label>
-    <input required type="password" name="password" bind:value={password} />
+    <h2>Login</h2>
+    <Input autofocus required type="email" name="email" label="Email" bind:value={email} />
+    <Input required type="password" name="password" label="Password" bind:value={password} />
     <div class="actions">
-      <button class="button">Login</button>
+      <button class="button primary">Login</button>
     </div>
   </form>
 </div>
@@ -55,4 +53,3 @@
     margin-top: 10px;
   }
 </style>
-

src/lib/Login.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { goto } from '$app/navigation'
   import { error } from '$lib/notification'
+  import Input from './Input.svelte'
 
   let email = $state('')
   let password = $state('')
@@ -20,18 +21,18 @@
 
 <div class="root">
   <form onsubmit={submit} class="form">
-    <label for="email">Email</label>
-    <!-- svelte-ignore a11y_autofocus -->
-    <input autofocus required type="email" name="email" bind:value={email} />
-
-    <label for="password">Password</label>
-    <input required type="password" name="password" bind:value={password} />
-
-    <label for="password">Repeat Password</label>
-    <input required type="password" name="repeatpassword" bind:value={repeatpassword} />
-
+    <h2>Register</h2>
+    <Input autofocus required type="email" name="email" label="Email" bind:value={email} />
+    <Input required type="password" name="password" label="Password" bind:value={password} />
+    <Input
+      required
+      type="password"
+      name="repeatpassword"
+      label="Repeat Password"
+      bind:value={repeatpassword}
+    />
     <div class="actions">
-      <button class="button">Register</button>
+      <button class="button primary">Register</button>
     </div>
   </form>
 </div>
@@ -60,4 +61,3 @@
     margin-top: 10px;
   }
 </style>
-

src/lib/Register.svelte

@@ -2,6 +2,7 @@
   import { onMount } from 'svelte'
   import Modal from '$lib/Modal.svelte'
   import { error } from '$lib/notification'
+  import Input from './Input.svelte'
   import Spinner from './Spinner.svelte'
 
   let loading = $state(true)
@@ -82,8 +83,7 @@
 <Modal open={showCreate}>
   <h2>Create</h2>
   <form onsubmit={create}>
-    <!-- svelte-ignore a11y_autofocus -->
-    <input bind:value={name} autofocus />
+    <Input bind:value={name} autofocus type="text" name="name" label="Name" />
     <div class="actions">
       <button class="button primary" type="submit">Create</button>
       <button class="button error" onclick={toggleShowCreate}>Close</button>

src/lib/Roles.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte'
   import Modal from '$lib/Modal.svelte'
+  import Input from './Input.svelte'
   import Spinner from './Spinner.svelte'
   import { error } from '$lib/notification'
 
@@ -81,8 +82,7 @@
 <Modal open={showCreate}>
   <h2>Create</h2>
   <form onsubmit={create}>
-    <!-- svelte-ignore a11y_autofocus -->
-    <input bind:value={name} autofocus />
+    <Input bind:value={name} autofocus type="text" name="name" label="Name" />
     <div class="actions">
       <button class="button primary" type="submit">Create</button>
       <button class="button error" onclick={toggleShowCreate}>Close</button>

src/lib/Themes.svelte

@@ -1,5 +1,5 @@
 export const load = ({ params }) => {
   return {
-    pk: params.pk
+    pk: params.pk,
   }
 }

src/routes/roles/[pk]/+page.ts

@@ -1,5 +1,5 @@
 export const load = ({ params }) => {
   return {
-    name: params.name
+    name: params.name,
   }
 }

src/routes/themes/[name]/+page.ts

@@ -1,5 +1,5 @@
 export const load = ({ params }) => {
   return {
-    pk: params.pk
+    pk: params.pk,
   }
 }

src/routes/users/[pk]/+page.ts

@@ -1,5 +1,5 @@
 export const load = ({ params }) => {
   return {
-    token: params.token
+    token: params.token,
   }
 }