# Supported controls Checkbox, Radio, FormControl.Static, HelpBlock

Examples of standard form controls supported in an example form layout. Use <FormControl> for <input>, <textarea>, and <select>. Use <Checkbox> and <Radio> for checkboxes and radios respectively, optionally with inline to render multiple on the same line. Use <FormControl.Static> for static text.


            const formInstance = (
              <Form>
                <FormGroup controlId="formControlsText">
                  <ControlLabel>Text</ControlLabel>
                  <FormControl type="text" placeholder="Enter text" />
                </FormGroup>
                <FormGroup controlId="formControlsEmail">
                  <ControlLabel>Email address</ControlLabel>
                  <FormControl type="email" placeholder="Enter email" />
                </FormGroup>
                <FormGroup controlId="formControlsPassword">
                  <ControlLabel>Password</ControlLabel>
                  <FormControl type="password" />
                </FormGroup>
                <FormGroup controlId="formControlsFile">
                  <ControlLabel>File</ControlLabel>
                  <FormControl type="file" />
                  <HelpBlock>Example block-level help text here.</HelpBlock>
                </FormGroup>

                <Checkbox checked readOnly>
                  Checkbox
                </Checkbox>
                <Radio checked readOnly>
                  Radio
                </Radio>

                <FormGroup>
                  <Checkbox inline>
                    1
                  </Checkbox>
                  {' '}
                  <Checkbox inline>
                    2
                  </Checkbox>
                  {' '}
                  <Checkbox inline disabled active>
                    3
                  </Checkbox>
                </FormGroup>
                <FormGroup>
                  <Radio inline>
                    1
                  </Radio>
                  {' '}
                  <Radio inline>
                    2
                  </Radio>
                  {' '}
                  <Radio inline disabled active>
                    3
                  </Radio>
                </FormGroup>

                <FormGroup controlId="formControlsSelect">
                  <ControlLabel>Select</ControlLabel>
                  <FormControl componentClass="select" placeholder="select">
                    <option value="select">select</option>
                    <option value="other">...</option>
                  </FormControl>
                </FormGroup>
                <FormGroup controlId="formControlsSelectMultiple">
                  <ControlLabel>Multiple select</ControlLabel>
                  <FormControl componentClass="select" multiple>
                    <option value="select">select (multiple)</option>
                    <option value="other">...</option>
                  </FormControl>
                </FormGroup>

                <FormGroup controlId="formControlsTextarea">
                  <ControlLabel>Textarea</ControlLabel>
                  <FormControl componentClass="textarea" placeholder="textarea" />
                </FormGroup>

                <FormGroup>
                  <ControlLabel>Static text</ControlLabel>
                  <FormControl.Static>
                    email@example.com
                  </FormControl.Static>
                </FormGroup>

                <Button type="submit">
                  Submit
                </Button>
              </Form>
            );

            
          

# Props

Checkbox

NameTypeDefaultDescription
bsClassstring'checkbox'Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.
disabledbooleanfalse
inlinebooleanfalse
onSelectfunction
Attaches a ref to the <input> element. Only functions can be used here.
<Checkbox inputRef={ref => { this.input = ref; }} />
inputReffunction
validationStateone of: "success", "warning", "error"Only valid if inline is not set.

Radio

NameTypeDefaultDescription
bsClassstring'radio'Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.
disabledbooleanfalse
inlinebooleanfalse
onSelectfunction
Attaches a ref to the <input> element. Only functions can be used here.
<Radio inputRef={ref => { this.input = ref; }} />
inputReffunction
validationStateone of: "success", "warning", "error"Only valid if inline is not set.

FormControl.Static

NameTypeDefaultDescription
bsClassstring'form-control-static'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'p'

HelpBlock

NameTypeDefaultDescription
bsClassstring'help-block'Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.