Update RadioButton/Checkbox documentation (#674)

* Fix RadioButton and Checkbox examples

* Remove references to FormGroup

Author: tcbegley

docs/components_page/components/input.md

@@ -31,7 +31,7 @@ When using `Input` with `type='number'`, the `value` prop will be given the valu
 
 ## Labels and text
 
-Use the `FormGroup` component along with `Label` and `FormText` to control the layout of your `Input` components. See the [documentation for forms](/l/components/form) for more details.
+Use the `Label` and `FormText` components to add additional information about the `Input` to your layout. See the [documentation for forms](/docs/components/form/) for more details.
 
 {{example:components/input/text_label.py:text_input}}
 
@@ -63,8 +63,6 @@ The `Select` component can be used to render a Bootstrap themed select input. Th
 
 `RadioItems` and `Checklist` components also work like _dash-core-components_. Provided you specify an `id`, _dash-bootstrap-components_ will render custom themed radio buttons or checkboxes rather than using the native browser buttons. When using `Checklist` you can also specify `switch=True` to render toggle-like switches rather than checkboxes. If you prefer to use the native buttons and checkboxes, set `custom=False`. Note that there is no native browser switch, so if you set `custom=False` then `switch` will be ignored.
 
-Use these components with `FormGroup` for automatic spacing and padding.
-
 {{example:components/input/radio_check.py:inputs}}
 
 Set `inline=True` to make the radio items or checklists fit next to each other on a line.
@@ -79,7 +77,7 @@ Use the `input_checked_style`, `input_checked_class_name`, `label_checked_style`
 
 ## Standalone checkboxes and radio buttons
 
-If you need more granular control over checkboxes and radio buttons, you can also create standalone components. Bind callbacks to the `checked` keyword to react to changes in the input state. To attach a label, create a FormGroup with `check=True` and use the label's `html_for` keyword to bind it to the checkbox.
+If you need more granular control over checkboxes and radio buttons, you can also create standalone components. Bind callbacks to the `checked` keyword to react to changes in the input state. To attach a label, wrap the input and a `Label` with a `html.Div` and add the class `form-check`. You can use the label's `html_for` keyword to bind it to the checkbox or radio button.
 
 {{example:components/input/radio_check_standalone.py:standalone_radio_check}}
 

docs/components_page/components/input/radio_check_standalone.R

@@ -5,31 +5,26 @@ standalone_radio_check <- htmlDiv(
   list(
     htmlDiv(
       list(
-        dbcCheckbox(
-          id = "standalone-checkbox",
-          class_name = "form-check-input"
-        ),
+        dbcCheckbox(id = "standalone-checkbox"),
         dbcLabel(
           "This is a checkbox",
           html_for = "standalone-checkbox",
-          class_name = "form-check-label"
+          check = TRUE
         )
-      )
+      ),
+      class_name = "form-check"
     ),
     htmlDiv(
       list(
-        dbcRadioButton(
-          id = "standalone-radio",
-          class_name = "form-check-input"
-        ),
+        dbcRadioButton(id = "standalone-radio"),
         dbcLabel(
           "This is a radio button",
           html_for = "standalone-radio",
-          class_name = "form-check-label"
+          check = TRUE
         )
-      )
+      ),
+      class_name = "form-check"
     ),
-    htmlBr(),
     htmlP(id = "standalone-radio-check-output")
   )
 )

docs/components_page/components/input/radio_check_standalone.jl

@@ -1,23 +1,28 @@
 using DashBootstrapComponents, DashHtmlComponents
 
 standalone_radio_check = html_div([
-    html_div([
-        dbc_checkbox(id = "standalone-checkbox", class_name = "form-check-input"),
-        dbc_label(
-            "This is a checkbox",
-            html_for = "standalone-checkbox",
-            class_name = "form-check-label",
-        ),
-    ]),
-    html_div([
-        dbc_radiobutton(id = "standalone-radio", class_name = "form-check-input"),
-        dbc_label(
-            "This is a radio button",
-            html_for = "standalone-radio",
-            class_name = "form-check-label",
-        ),
-    ]),
-    html_br(),
+    html_div(
+        [
+            dbc_checkbox(id = "standalone-checkbox"),
+            dbc_label(
+                "This is a checkbox",
+                html_for = "standalone-checkbox",
+                check = true,
+            ),
+        ],
+        class_name = "form-check",
+    ),
+    html_div(
+        [
+            dbc_radiobutton(id = "standalone-radio"),
+            dbc_label(
+                "This is a radio button",
+                html_for = "standalone-radio",
+                check = true,
+            ),
+        ],
+        class_name = "form-check",
+    ),
     html_p(id = "standalone-radio-check-output"),
 ]);
 

docs/components_page/components/input/radio_check_standalone.py

@@ -6,29 +6,26 @@
     [
         html.Div(
             [
-                dbc.Checkbox(
-                    id="standalone-checkbox", class_name="form-check-input"
-                ),
+                dbc.Checkbox(id="standalone-checkbox"),
                 dbc.Label(
                     "This is a checkbox",
                     html_for="standalone-checkbox",
-                    class_name="form-check-label",
+                    check=True,
                 ),
             ],
+            class_name="form-check",
         ),
         html.Div(
             [
-                dbc.RadioButton(
-                    id="standalone-radio", class_name="form-check-input"
-                ),
+                dbc.RadioButton(id="standalone-radio"),
                 dbc.Label(
                     "This is a radio button",
                     html_for="standalone-radio",
-                    class_name="form-check-label",
+                    check=True,
                 ),
             ],
+            class_name="form-check",
         ),
-        html.Br(),
         html.P(id="standalone-radio-check-output"),
     ]
 )

src/components/form/FormFeedback.js

@@ -5,7 +5,7 @@ import RBFormControl from 'react-bootstrap/FormControl';
 
 /**
  * The FormFeedback component can be used to provide feedback on input values
- * in a form. Add the form feedback to a `FormGroup` and set the `valid` or
+ * in a form. Add the form feedback to your layout and set the `valid` or
  * `invalid` props of the associated input to toggle visibility.
  */
 const FormFeedback = props => {

src/components/form/Label.js

@@ -34,6 +34,7 @@ const Label = props => {
     color,
     style,
     loading_state,
+    check,
     ...otherProps
   } = props;
 
@@ -52,7 +53,8 @@ const Label = props => {
   const classes = classNames(
     class_name || className,
     cols.length && alignClass,
-    color && isBootstrapColor && `text-${color}`
+    color && isBootstrapColor && `text-${color}`,
+    check && 'form-check-label'
   );
 
   return (
@@ -143,6 +145,11 @@ Label.propTypes = {
    */
   html_for: PropTypes.string,
 
+  /**
+   * Set to True when using to label a Checkbox or RadioButton.
+   */
+  check: PropTypes.bool,
+
   /**
    * Specify width of label for use in grid layouts. Accepts the same values
    * as the Col component.

src/components/input/Input.js

@@ -568,13 +568,13 @@ Input.propTypes = {
 
   /**
    * Apply valid style to the Input for feedback purposes. This will cause
-   * any FormFeedback in the enclosing FormGroup with valid=True to display.
+   * any FormFeedback in the enclosing div with valid=True to display.
    */
   valid: PropTypes.bool,
 
   /**
    * Apply invalid style to the Input for feedback purposes. This will cause
-   * any FormFeedback in the enclosing FormGroup with valid=False to display.
+   * any FormFeedback in the enclosing div with valid=False to display.
    */
   invalid: PropTypes.bool,
 

src/components/input/Select.js

@@ -151,13 +151,13 @@ Select.propTypes = {
 
   /**
    * Apply valid style to the Input for feedback purposes. This will cause
-   * any FormFeedback in the enclosing FormGroup with valid=True to display.
+   * any FormFeedback in the enclosing div with valid=True to display.
    */
   valid: PropTypes.bool,
 
   /**
    * Apply invalid style to the Input for feedback purposes. This will cause
-   * any FormFeedback in the enclosing FormGroup with valid=False to display.
+   * any FormFeedback in the enclosing div with valid=False to display.
    */
   invalid: PropTypes.bool,
 

src/components/input/Textarea.js

@@ -383,13 +383,13 @@ Textarea.propTypes = {
 
   /**
    * Apply valid style to the Textarea for feedback purposes. This will cause
-   * any FormFeedback in the enclosing FormGroup with valid=True to display.
+   * any FormFeedback in the enclosing div with valid=True to display.
    */
   valid: PropTypes.bool,
 
   /**
    * Apply invalid style to the Textarea for feedback purposes. This will cause
-   * any FormFeedback in the enclosing FormGroup with valid=False to display.
+   * any FormFeedback in the enclosing div with valid=False to display.
    */
   invalid: PropTypes.bool,