| 1 | @# Form group
|
| 2 |
|
| 3 | Form groups support more complex form controls than [simple labels](#core/components/label),
|
| 4 | such as [control groups](#core/components/control-group) or [`NumericInput`](#core/components/numeric-input).
|
| 5 | They also support additional helper text to aid with user navigation.
|
| 6 |
|
| 7 | @reactExample FormGroupExample
|
| 8 |
|
| 9 | @## Props
|
| 10 |
|
| 11 | This component is a lightweight wrapper around its children with props for the
|
| 12 | label above and helper text below.
|
| 13 |
|
| 14 | ```tsx
|
| 15 | <FormGroup
|
| 16 | helperText="Helper text with details..."
|
| 17 | label="Label A"
|
| 18 | labelFor="text-input"
|
| 19 | labelInfo="(required)"
|
| 20 | >
|
| 21 | <InputGroup id="text-input" placeholder="Placeholder text" />
|
| 22 | </FormGroup>
|
| 23 | ```
|
| 24 |
|
| 25 | @interface IFormGroupProps
|
| 26 |
|
| 27 | @## CSS
|
| 28 |
|
| 29 | - Link each label to its respective control element with a `for={#id}` attribute on the `<label>` and
|
| 30 | `id={#id}` on the control.
|
| 31 |
|
| 32 | - Add `.@ns-intent-*` or `.@ns-disabled` to `.@ns-form-group` to style the label and helper text.
|
| 33 | Similar to labels, nested controls need to be styled separately.
|
| 34 |
|
| 35 | - Add `.@ns-inline` to `.@ns-form-group` to place the label to the left of the control.
|
| 36 |
|
| 37 | - Add `.@ns-large` to `.@ns-form-group` to align the label when used with large inline Blueprint controls.
|
| 38 |
|
| 39 | @css form-group
|