Valid widget

IPython/html/static/style/ipython.min.css

@@ -1477,6 +1477,12 @@ h6:hover .anchor-link {
 .widget_item .dropdown-menu li a {
   color: inherit;
 }
+.widget-valid {
+  margin-top: 9px;
+  margin-bottom: 10px;
+  margin-left: 3px;
+  margin-right: 3px;
+}
 .widget-hbox {
   /* Horizontal widgets */
   /* Old browsers */

IPython/html/static/style/style.min.css

@@ -10269,6 +10269,12 @@ h6:hover .anchor-link {
 .widget_item .dropdown-menu li a {
   color: inherit;
 }
+.widget-valid {
+  margin-top: 9px;
+  margin-bottom: 10px;
+  margin-left: 3px;
+  margin-right: 3px;
+}
 .widget-hbox {
   /* Horizontal widgets */
   /* Old browsers */

IPython/html/static/widgets/js/widget_bool.js

@@ -71,7 +71,6 @@ define([
             }
             return CheckboxView.__super__.update.apply(this);
         },
-        
     });
 
 
@@ -150,8 +149,41 @@ define([
         },
     });
 
+
+    var ValidView = widget.DOMWidgetView.extend({
+        render: function() {
+            /**
+             * Called when view is rendered.
+             */
+            this.$el.addClass("fa widget-valid");
+            this.model.on("change:value", this.update, this);
+            this.update();
+        },
+        update: function() {
+            /**
+             * Update the contents of this view
+             *
+             * Called when the model is changed.  The model may have been
+             * changed by another view or by a state update from the back-end.
+             */
+            if (this.model.get("value")) {
+                this.$el.removeClass("fa-close").addClass("fa-check");
+                this.after_displayed(function() {
+                    this.$el.css("color", "green");
+                }, this);
+            } else {
+                this.$el.removeClass("fa-check").addClass("fa-close");
+                this.after_displayed(function() {
+                    this.$el.css("color", "red");
+                }, this);
+            }
+        }
+    });
+
+
     return {
         'CheckboxView': CheckboxView,
         'ToggleButtonView': ToggleButtonView,
+        'ValidView': ValidView,
     };
 });

IPython/html/static/widgets/less/widgets.less

@@ -209,6 +209,13 @@
     color: inherit;
 }
 
+.widget-valid {
+    margin-top: 9px;
+    margin-bottom: 10px;
+    margin-left: 3px;
+    margin-right: 3px;
+}
+
 .widget-hbox {
     /* Horizontal widgets */
     .hbox();

IPython/html/widgets/__init__.py

@@ -2,7 +2,7 @@ from .widget import Widget, DOMWidget, CallbackDispatcher, register
 
 from .trait_types import Color
 
-from .widget_bool import Checkbox, ToggleButton
+from .widget_bool import Checkbox, ToggleButton, Valid
 from .widget_button import Button
 from .widget_box import Box, FlexBox, HBox, VBox
 from .widget_float import FloatText, BoundedFloatText, FloatSlider, FloatProgress, FloatRangeSlider

IPython/html/widgets/widget_bool.py

@@ -60,7 +60,6 @@ class ToggleButton(_Bool):
        icon: str
            font-awesome icon name
 """
-    
     _view_name = Unicode('ToggleButtonView', sync=True)
     tooltip = Unicode(help="Tooltip caption of the toggle button.", sync=True)
     icon = Unicode('', help= "Font-awesome icon.", sync=True)
@@ -71,6 +70,19 @@ class ToggleButton(_Bool):
         predefined styling for the button.""")
 
 
+@register('IPython.Valid')
+class Valid(_Bool):
+
+    """Displays a boolean `value` in the form of a green check (True / valid)
+    or a red cross (False / invalid).
+
+    Parameters
+    ----------
+    value: {True,False}
+        value of the Valid widget
+"""
+    _view_name = Unicode('ValidView', sync=True)
+
 # Remove in IPython 4.0
 CheckboxWidget = DeprecatedClass(Checkbox, 'CheckboxWidget')
 ToggleButtonWidget = DeprecatedClass(ToggleButton, 'ToggleButtonWidget')