Bootstrap: Forms

Basic example

<Form>
  <FormGroup>
    <Label htmlFor='exampleInputEmail1'>Email address</Label>
    <Input type='email' id='exampleInputEmail1' placeholder='Enter email' />
  </FormGroup>
  <FormGroup>
    <Label htmlFor='exampleInputPassword1'>Password</Label>
    <Input type='password' id='exampleInputPassword1' placeholder='Password' />
  </FormGroup>
  <FormGroup>
    <Label htmlFor='exampleInputFile'>File input</Label>
    <Input type='file' id='exampleInputFile' />
    <HelpBlock>Example block-level help text here.</HelpBlock>
  </FormGroup>
  <Checkbox>Check me out</Checkbox>
  <Button type='submit'>Submit</Button>
</Form>

Inline form

Add inline to your <Form> for left-aligned and inline-block controls

@
<Form inline>
  <FormGroup>
    <Label className='sr-only' htmlFor='exampleInputEmail2'>Email address</Label>
    <Input type='email' id='exampleInputEmail2' placeholder='Enter email' />
  </FormGroup>
  <FormGroup>
    <InputGroup>
      <InputGroupAddon>@</InputGroupAddon>
      <Input type='text' placeholder='Enter username' />
    </InputGroup>
  </FormGroup>
  <FormGroup>
    <Label className='sr-only' htmlFor='exampleInputPassword2'>Password</Label>
    <Input type='password' id='exampleInputPassword2' placeholder='Password' />
  </FormGroup>
  <Checkbox>Remember me</Checkbox>
  <Button type='submit'>Sign in</Button>
</Form>

Horizontal form

Add horizontal to your <Form> to align labels and groups of form controls in a horizontal layout

<Form horizontal>
  <FormGroup>
    <Label sm={2} htmlFor='inputEmail3' control>Email</Label>
    <Col sm={10}>
      <Input type='email' id='inputEmail3' placeholder='Email' />
    </Col>
  </FormGroup>
  <FormGroup>
    <Label sm={2} htmlFor='inputPassword3' control>Password</Label>
    <Col sm={10}>
      <Input type='password' id='inputPassword3' placeholder='Password' />
    </Col>
  </FormGroup>
  <FormGroup>
    <Col smOffset={2} sm={10}>
      <Checkbox>Remember me</Checkbox>
    </Col>
  </FormGroup>
  <FormGroup>
    <Col smOffset={2} sm={10}>
      <Button type='submit'>Sign in</Button>
    </Col>
  </FormGroup>
</Form>

Static control

When you need to place plain text next to a form label within a horizontal form, use the Static component.

email@example.com

<Form horizontal>
  <FormGroup>
    <Label sm={2} control>Email</Label>
    <Col sm={10}>
      <Static>email@example.com</Static>
    </Col>
  </FormGroup>
  <FormGroup>
    <Label sm={2} htmlFor='inputPassword4' control>Password</Label>
    <Col sm={10}>
      <Input type='password' id='inputPassword4' placeholder='Password' />
    </Col>
  </FormGroup>
</Form>

Bootstrap: Rubix Enhancements

Auto-complete

By default, browser's native auto-complete is disabled for email and password fields as more often than not the browser populates these fields when it wasn't required. However, you can selectively enable them back again by passing the option: allowAutoComplete

<Form allowAutoComplete>
  <FormGroup>
    <Label htmlFor='exampleInputText1'>Username</Label>
    <Input type='text' id='exampleInputText1' placeholder='Enter username' />
  </FormGroup>
  <FormGroup>
    <Label htmlFor='exampleInputEmail3'>Email address</Label>
    <Input type='email' id='exampleInputEmail3' placeholder='Enter email' />
  </FormGroup>
  <FormGroup>
    <Label htmlFor='exampleInputPassword3'>Password</Label>
    <Input type='password' id='exampleInputPassword3' placeholder='Password' />
  </FormGroup>
  <Button type='submit'>Submit</Button>
</Form>