# Forms FormGroup, FormControl, ControlLabel

The <FormControl> component renders a form control with Bootstrap styling. The <FormGroup> component wraps a form control with proper spacing, along with support for a label, help text, and validation state. To ensure accessibility, set controlId on <FormGroup>, and use <ControlLabel> for the label.


            class FormExample extends React.Component {
              constructor(...args) {
                super(...args);

                this.state = { value: '' };
              }

              getValidationState() {
                const length = this.state.value.length;
                if (length > 10) return 'success';
                else if (length > 5) return 'warning';
                else if (length > 0) return 'error';
              }

              handleChange(e) {
                this.setState({ value: e.target.value });
              }

              render() {
                return (
                  <Form>
                    <FormGroup
                      controlId="formBasicText"
                      validationState={this.getValidationState()}
                    >
                      <ControlLabel>Working example with validation</ControlLabel>
                      <FormControl
                        type="text"
                        value={this.state.value}
                        placeholder="Enter text"
                        onChange={::this.handleChange}
                      />
                      <FormControl.Feedback />
                      <HelpBlock>Validation is based on string length.</HelpBlock>
                    </FormGroup>
                  </Form>
                );
              }
            }

            
          

# Props

FormGroup

NameTypeDefaultDescription
bsClassstring'form-group'Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.
bsSizeone of: "lg", "large", "sm", "small"Component size variations
controlIdstringSets id on <FormControl> and htmlFor on <FormGroup.Label>.
validationStateone of: "success", "warning", "error"

FormControl

NameTypeDefaultDescription
bsClassstring'form-control'Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.
componentClasselementType'input'
idstringUses controlId from <FormGroup> if not explicitly specified.
typestringOnly relevant if componentClass is 'input'

ControlLabel

NameTypeDefaultDescription
bsClassstring'control-label'Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.
htmlForstringUses controlId from <FormGroup> if not explicitly specified.
srOnlybooleanfalse