Starting to implement the create invitation form

src/components/invitation/Invitation.tsx

@@ -1,5 +1,8 @@
 import { createForm } from "@felte/solid";
 import { Component } from "solid-js";
+import { TextField, Button } from "@kobalte/core";
+
+import "./style.css";
 
 interface Props {}
 
@@ -17,8 +20,32 @@ const Invitation: Component<Props> = (props) => {
 
   return (
     <form use:form>
-      <label for="database">Database</label>
-      <input type="url" name="database" required={true} />
+      <TextField.Root>
+        <TextField.Label>Database</TextField.Label>
+        <TextField.Input
+          type="url"
+          name="database"
+          required={true}
+          placeholder="Database URL"
+        />
+        <TextField.ErrorMessage>
+          Please provide a valid URL
+        </TextField.ErrorMessage>
+      </TextField.Root>
+      <TextField.Root>
+        <TextField.Label>Password</TextField.Label>
+        <TextField.Input
+          type="text"
+          name="password"
+          required={true}
+          placeholder="Password"
+          autocomplete="off"
+        />
+        <TextField.ErrorMessage>
+          Please provide a valid password
+        </TextField.ErrorMessage>
+      </TextField.Root>
+      <Button.Root type="submit">Create</Button.Root>
     </form>
   );
 };

src/components/invitation/style.css

@@ -0,0 +1,20 @@
+input,
+select {
+  padding: 5px;
+  margin-bottom: 30px;
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid #464545;
+}
+input::placeholder {
+  color: #5a5959;
+}
+
+label {
+  color: #5a5959;
+  display: block;
+}
+
+form {
+  text-align: left;
+}