Adding ui-checkbox element.

src/main/untangled/ui/elements.cljc

@@ -195,3 +195,24 @@
                        (dissoc :active :title :type)
                        clj->js)]
     (apply dom/div attributes (when title (build-title title)) children)))
+
+(defn ui-checkbox
+  "Render a checkbox (not the label). Props is a normal clj(s) map with React/HTML attributes plus:
+
+  className (optional): additional class stylings to apply to the top level of the checkbox
+  id: Name of the checkbox
+  style (optional):  is-indeterminate :c-checkbox--informative"
+  [{:keys [id style] :or {id ""} :as attrs}]
+  (let [legal-styles #{:is-indeterminate :c-checkbox--informative}
+        user-classes (get attrs :className "")
+        classes (cond-> (str user-classes " c-checkbox ")
+                        (contains? legal-styles style) (str (name style))
+                        )
+        attrs (cond-> attrs
+                      :always (assoc :type "checkbox")
+                      :always (dissoc :styles)
+                      :always (assoc :className classes)
+                      :always (assoc :id (name id)))        ]
+    (dom/span #js {} (dom/input (clj->js attrs))
+              (dom/label #js {:htmlFor id} \u00A0))
+    ))

src/visuals/untangled/ui/element_visuals.cljs

@@ -80,3 +80,10 @@
     (e/ui-message {:color :warning} "This is a warning message.")
     (e/ui-message {:color :warning} "This is a warning message with another child." (icon :arrow_forward))
     (e/ui-message {:className "h2"} "This is message using a standard H2 class name.")))
+
+(defcard checkbox
+   (dom/div nil
+    (e/ui-checkbox {:id "checkbox"} )
+    (e/ui-checkbox {:id "checkbox" :style #{:is-indeterminate}} )
+    (e/ui-checkbox {:id "checkbox" :style #{:c-checkbox--informative}} )
+    (e/ui-checkbox {:id "checkbox" :style #{:is-indeterminate :c-checkbox--informative}} )))