     [reagent.core :as r]
     [garden.core :refer [css]]
     [garden.stylesheet :refer [at-import]]
-    [clojure.string :as string]))
+    [clojure.string :as string])
+  (:import
+    [goog.events KeyCodes]))
 
 (def braid-color "#2bb8ba")
 
 (def small-spacing "0.5rem")
 (def border-radius "3px")
+
+(def invalid-color "#fd4734")
+(def valid-color "#2bb8ba")
 
 (defn input-field-mixin []
   {:font-size "1.25rem"

            [:p "Invite-only and hidden from the Braid Group Directory."]
            [:p "Free to evaluate, then pay-what-you-want."]]]]

         [:button {:disabled (not valid?)}
          "Create your group"]]))))

(defn app-view []

     ["::-webkit-input-placeholder"
      {:color "#eee"}]]

    [:&.invalid
     ["input[type=text]"
      {:border-color invalid-color}]

     [:.field::after
      (input-field-mixin)
      {:content "\"!\""
       :color invalid-color
       :border "none"
       :display "inline-block"}]]

    [:&.valid
     [:.field::after
      (input-field-mixin)
      {:content "\"\u2713\""
       :color valid-color
       :border "none"
       :display "inline-block"}]]

    [:&.group-url

     [:.field
      {:white-space "nowrap"}

      ["input[type=text]"
