FormGroup

import { FormGroup } from '@concur/nui-widgets';

Form groups encapsulate components related to a single form input. At a minimum, it should contain ControLabel and FormControl child components. Many FormGroup properties will be transformed or passed along to its children so these values will not need to be manually re-specified. NOTE: Checkbox controls are not allowed inside FormGroup as they are self-labeling.

Examples

Sizes

Three sizes are supported: 'lg' (the default), 'md' and 'sm'. Use the size property to set the size.

Note the use of the FormGroup.HelpBlock component to provide additional explanatory text in the following example.

<FormGroup
    controlId={shortid.generate()}>
    <ControlLabel>Large</ControlLabel>
    <FormControl />
    <FormGroup.HelpBlock>Help block text</FormGroup.HelpBlock>
</FormGroup>

<FormGroup
    controlId={shortid.generate()}
    size='md'>
    <ControlLabel>Medium</ControlLabel>
    <FormControl />
    <FormGroup.HelpBlock>Help block text</FormGroup.HelpBlock>
</FormGroup>

<FormGroup
    controlId={shortid.generate()}
    size='sm'>
    <ControlLabel>Small</ControlLabel>
    <FormControl />
    <FormGroup.HelpBlock>Help block text</FormGroup.HelpBlock>
</FormGroup>

Required

Use the required property to mark form controls as required. Labels will display a visual indication while input controls will have a required attribute added to help with assistive technologies.

<FormGroup
    controlId={shortid.generate()}
    required>
    <ControlLabel>Label</ControlLabel>
    <FormControl />
    <FormGroup.HelpBlock>Help block text</FormGroup.HelpBlock>
</FormGroup>

Validation States

Validation state properties apply only to FormGroup components (not individual ControlLabel or FormControl components). The validation tooltip will be triggered when hovering over the icon next to the ControlLabel and also when the FormControl receives focus. Use the validationMessage property to set a validation state.

<FormGroup
    controlId={shortid.generate()}
    validationMessage={{ state: 'warning', text: 'Validation warning message' }}>
    <ControlLabel>FormGroup Label</ControlLabel>
    <FormControl />
</FormGroup>

<FormGroup
    controlId={shortid.generate()}
    validationMessage={{ state: 'error', text: 'Validation error message' }}>
    <ControlLabel>FormGroup Label</ControlLabel>
    <FormControl />
</FormGroup>

Usage

Properties

Property Type Default Description
bsClass String 'form-group' Base CSS class and prefix for the component. One should not generally change bsClass except to add new, non-Bootstrap CSS styles to a component.
children Node   Collection of React components to be placed in the form group (ControlLabel, FormControl, FormGroup.HelpBlock).
controlId String   Sets id attribute on FormControl and htmlFor property on ControlLabel.
required Boolean false Will pass the required property to all child components (labels and input controls).
size String 'lg' Size of child elements within the form group (ControlLabel, FormControl, FormGroup.HelpBlock). Options are 'lg', 'md', 'sm'.
validationMessage Object   An object identifying a validation message. The object will include properties for state and text; e.g., { state: 'warning', text: 'This is your last warning' }. The options for state are 'error' and 'warning'. text is the message shown in the validation tooltip; as with all text, it must be localized.