[DM] forms docs nesting fixes

packages/core/src/components/components.md

@@ -17,7 +17,7 @@ Use them like you normally do.
 <!--@page datetime-->
 @page dialog
 @page editable-text
-<!--@page forms-->
+@page forms
 @page hotkeys
 @page menu
 @page navbar

packages/core/src/components/forms/checkbox.md

@@ -0,0 +1,33 @@
+@# Checkboxes
+
+Blueprint's custom checkboxes use an extra `.pt-control-indicator` element after the `<input>` to
+achieve their custom styling. You should then wrap the whole thing in a `<label>` with the classes
+`.pt-control.pt-checkbox`.
+
+Note that attribute modifiers (`:checked`, `:disabled`) are applied on the internal `<input>`
+element. Further note that `:indeterminate` can only be set via JavaScript (the `Checkbox` React
+component supports it handily with a prop).
+
+@## CSS API
+
+@## JavaScript API
+
+The `Checkbox` component is available in the __@blueprintjs/core__ package.
+Make sure to review the [general usage docs for JS components](#components.usage).
+
+```
+// simple usage for string labels
+<Checkbox checked={this.state.isEnabled} label="Enabled" onChange={this.handleEnabledChange} />
+
+// advanced usage for JSX content
+<Checkbox checked={this.state.isEnabled} onChange={this.handleEnabledChange}>
+<span className="pt-icon-standard pt-icon-user" />
+Gilad Gray
+</Checkbox>
+```
+
+Note that this component supports the full range of props available on HTML `input` elements.
+Use `checked` instead of `value` in controlled mode to avoid typings issues.
+The most common options are detailed below.
+
+@interface ICheckboxProps

packages/core/src/components/forms/control-group.md

@@ -1,4 +1,4 @@
-@## Control groups
+@# Control groups
 
 A `.pt-control-group` renders several distinct controls as one unit, squaring the borders between
 them. It supports any number of `.pt-button`, `.pt-input`, `.pt-input-group`, and `.pt-select`
@@ -18,7 +18,7 @@ child must be marked individually as `.pt-large` for uniform large appearance.
     should be promoted to live in a control group.</p>
 </div>
 
-@### Responsive control groups
+@## Responsive control groups
 
 Add the class `pt-fill` to a control group to make all elements expand equally to fill the
 available space. Then add the class `pt-fixed` to individual elements to revert them to their
@@ -29,7 +29,7 @@ to expand it to fill the available space while other elements retain their origi
 
 You can adjust the specific size of an element with the `flex-basis` CSS property.
 
-@### Vertical control groups
+@## Vertical control groups
 
 Add the class `pt-vertical` to create a vertical control group. Controls in a vertical group
 will all have the same width as the widest control.

packages/core/src/components/forms/file-upload.md

@@ -1,4 +1,4 @@
-@## File upload
+@# File upload
 
 Use the standard `input type="file"` along with a `span` with class `pt-file-upload-input`.
 Wrap that all in a `label` with class `pt-file-upload`.

packages/core/src/components/forms/form-group.md

@@ -1,4 +1,4 @@
-@### Form groups
+@# Form groups
 
 Form groups support more complex form controls than [simple labels](#components.forms.labels.simple-labels),
 such as [control groups](#components.forms.control-group) or [`NumericInput`](#components.forms.numeric-input).

packages/core/src/components/forms/forms.md

@@ -8,3 +8,16 @@ React components try to transparently mirror the underlying HTML element, so the
 range of appropriate HTML props. If you provide a `className` prop, the class names you provide will
 be added to the default Blueprint class name. If you specify other attributes that the component
 provides, you'll overide the default value.
+
+@page label
+@page form-group
+@page checkbox
+@page switch
+@page radio
+@page text-area
+@page input
+@page input-group
+@page control-group
+@page select
+@page file-upload
+@page numeric-input

packages/core/src/components/forms/input-group.md

@@ -1,10 +1,10 @@
-@## Text input groups
+@# Text input groups
 
 An input group allows you to add icons and buttons _within_ a text input to expand its
 functionality. For example, you might use an input group to build a visibility toggle for a password
 field.
 
-@### CSS API
+@## CSS API
 
 You can place a single `.pt-icon` or `.pt-button.pt-icon-*` on either end of the input. The order is
 dictated by the HTML markup: an element specified before the `input` appears on the left edge, and
@@ -21,7 +21,7 @@ the parent input.
     arbitrary content in its right element.
 </div>
 
-@### JavaScript API
+@## JavaScript API
 
 The `InputGroup` component is available in the __@blueprintjs/core__ package. Make sure to review
 the [general usage docs for JS components](#components.usage).

packages/core/src/components/forms/input.md

@@ -1,21 +1,13 @@
-@## Text inputs
+@# Text inputs
 
 Use the `pt-input` class on an `input[type="text"]`. You should also specify `dir="auto"` [to better
 support RTL languages](http://www.w3.org/International/questions/qa-html-dir#dirauto) (in all
 browsers except Internet Explorer).
 
-@### Search field
+@## Search field
 
 Changing the `<input>` element's `type` attribute to `"search"` styles it to look like a search
 field, giving it a rounded appearance. This style is equivalent to the `.pt-round` modifier, but it
 is applied automatically for `[type="search"]` inputs.
 
 Note that some browsers also implement a handler for the `esc` key to clear the text in a search field.
-
-@## Text areas
-
-Text areas are similar to text inputs, but they are resizable.
-
-You should also specify `dir="auto"` on text areas
-[to better support RTL languages](http://www.w3.org/International/questions/qa-html-dir#dirauto)
-(in all browsers except Internet Explorer).

packages/core/src/components/forms/label.md

@@ -1,4 +1,4 @@
-@## Labels
+@# Labels
 
 Labels enhance the usability of your forms.
 
@@ -9,7 +9,7 @@ Labels enhance the usability of your forms.
     <p>Form groups support more complex control layouts but require more markup to maintain consistent visuals.</p>
 </div>
 
-@### Simple labels
+@## Simple labels
 
 Simple labels are useful for basic forms for a single `<input>`.
 
@@ -18,7 +18,7 @@ Simple labels are useful for basic forms for a single `<input>`.
 - Putting the `<input>` element _inside_ a `<label>` element increases the area where the user
 can click to activate the control. Notice how in the examples below, clicking a `<label>` focuses its `<input>`.
 
-@### Disabled labels
+@## Disabled labels
 
 Add the `.pt-label` and `.pt-disabled` class modifiers to a `<label>` to make the label appear
 disabled.

packages/core/src/components/forms/numeric-input.md

@@ -1,9 +1,9 @@
-@## Numeric inputs
+@# Numeric inputs
 
 The `NumericInput` component provides controls for easily inputting,
 incrementing, and decrementing numeric values.
 
-@### Interactions
+@## Interactions
 
 Values in numeric inputs can be incremented or decremented using both keyboard and mouse interactions.
 
@@ -19,15 +19,15 @@ Values in numeric inputs can be incremented or decremented using both keyboard a
 - `Shift + Click ⌃/⌄` - change the value by one major step (default: `±10`)
 - `Alt + Click ⌃/⌄` - change the value by one minor step (default: `±0.1`)
 
-@### Basic example
+@## Basic example
 
 This example shows how `NumericInput` works out of the box. It supports the
 basic keyboard and mouse interactions listed above, as well as basic keyboard
 entry:
 
 @reactExample NumericInputBasicExample
 
-@### Extended example
+@## Extended example
 
 This example shows how `NumericInput` can be extended beyond its core
 functionality. It supports the basic interactions above as well as each of the
@@ -50,15 +50,15 @@ trigged, the field will be cleared.
 
 @reactExample NumericInputExtendedExample
 
-@### JavaScript API
+@## JavaScript API
 
 The `NumericInput` component is available in the __@blueprintjs/core__ package.
 Make sure to review the [general usage docs for JS
 components](#components.usage).
 
 @interface INumericInputProps
 
-@#### Uncontrolled mode
+@### Uncontrolled mode
 
 By default, this component will function in uncontrolled mode, managing all of
 its own state. In uncontrolled mode, simply provide an `onValueChange` callback
@@ -82,7 +82,7 @@ export class NumericInputExample extends React.Component<{}, {}> {
 }
 ```
 
-@#### Controlled mode
+@### Controlled mode
 
 If you prefer to have more control over your numeric input's behavior, you can
 specify the `value` property to use the component in **controlled mode**.

packages/core/src/components/forms/radio.md

@@ -0,0 +1,42 @@
+@# Radios
+
+Blueprint's custom radio buttons use an extra `.pt-control-indicator` element after the `<input>`
+to achieve their custom styling. You should then wrap the whole thing in a `<label>` with the
+classes `.pt-control.pt-radio`.
+
+Note that attribute modifiers (`:checked`, `:disabled`) are applied on the internal `<input>`
+element.
+
+@## CSS API
+
+@## JavaScript API
+
+The `Radio` and `RadioGroup` components are available in the __@blueprintjs/core__ package. Make
+sure to review the [general usage docs for JS components](#components.usage).
+
+Typically, radio buttons are used in a group to choose one option from several, similar to how a
+`<select>` tag contains several `<option>` tags. As such, you can use the `RadioGroup` component
+with a series of `Radio` children. `RadioGroup` is responsible for managing state and interaction.
+
+```tsx
+<RadioGroup
+    label="Meal Choice"
+    onChange={this.handleMealChange}
+    selectedValue={this.state.mealType}
+>
+    <Radio label="Soup" value="one" />
+    <Radio label="Salad" value="two" />
+    <Radio label="Sandwich" value="three" />
+</RadioGroup>
+```
+
+Note that this component supports the full range of props available on HTML `input` elements.
+The most common options are detailed below.
+
+@interface IRadioProps
+
+@### RadioGroup
+
+@interface IRadioGroupProps
+
+@interface IOptionProps

packages/core/src/components/forms/select.md

@@ -1,4 +1,4 @@
-@## Selects
+@# Selects
 
 Styling `<select>` tags requires a wrapper element to customize the dropdown caret. Put class
 modifiers on the wrapper and attribute modifiers directly on the `<select>`.
@@ -8,6 +8,6 @@ modifiers on the wrapper and attribute modifiers directly on the `<select>`.
     to the `<select>` tag.
 </div>
 
-@### Labeled static dropdown
+@## Labeled static dropdown
 
 You can label `<select>` tags, similar to how you label any other form control.