Form group

Component for grouping form controls, buttons, dropdowns together.

Finder component

Supported controls

import FormGroup from '../../components/FormGroup'
import DropdownSelect from '../../components/DropdownSelect'
import Form from 'react-bootstrap/Form'
import InputGroup from 'react-bootstrap/InputGroup'
import Button from 'react-bootstrap/Button'
import Nouislider from 'nouislider-react'
import 'nouislider/distribute/nouislider.css'

{/* Form group: Text input + Button */}
<FormGroup>
  <Form.Control placeholder='Text input' />
  <Button variant='translucent-primary'>Button</Button>
</FormGroup>

{/* Form group: Select + Button */}
<FormGroup>
  <Form.Select defaultValue='default'>
    <option value='default' disabled>Select box</option>
    <option value='1'>Option item 1</option>
    <option value='2'>Option item 2</option>
    <option value='3'>Option item 3</option>
  </Form.Select>
  <Button variant='translucent-primary'>Button</Button>
</FormGroup>


{/* Form group: Input group + Button */}
<FormGroup>
  <InputGroup>
    <InputGroup.Text className='text-muted'>
      <i className='fi-camera-plus'></i>
    </InputGroup.Text>
    <Form.Control placeholder='Input group' />
  </InputGroup>
  <Button variant='translucent-primary'>Button</Button>
</FormGroup>


{/* Form group: Dropdown + Button */}
<FormGroup>
  <DropdownSelect
    defaultValue='Dropdown here'
    options={[
      [null, 'Action'], // First element is an icon class, null means no icon
      [null, 'Another action'],
      [null, 'Something else here'],
      [null, 'Yet another action']
    ]}
  />
  <Button variant='translucent-primary' className='ms-auto'>Button</Button>
</FormGroup>

{/* Form group: Range slider + Button */}
<FormGroup>
  <div className='range-slider'>
    <Nouislider
      range={{min: 0, max: 1000}}
      start={450}
      format={{
        to: value => '$' + parseInt(value, 10),
        from: value => Number(value)
      }}
      connect={`lower`}
      tooltips
      className='range-slider-ui'
    />
  </div>
  <Button variant='translucent-primary'>Button</Button>
</FormGroup>

Multiple controls (Responsive)



Price
import FormGroup from '../components/FormGroup'
import DropdownSelect from '../../components/DropdownSelect'
import Form from 'react-bootstrap/Form'
import InputGroup from 'react-bootstrap/InputGroup'
import Button from 'react-bootstrap/Button'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import Nouislider from 'nouislider-react'
import 'nouislider/distribute/nouislider.css'

{/* Form group: Multiple controls (Responsive) */}
<FormGroup className='d-block'>
  <Row className='g-0 ms-sm-n2'>
    <Col md={7} className='d-sm-flex align-items-center'>
      <InputGroup className='w-sm-50 border-end-sm'>
        <InputGroup.Text className='text-muted'>
          <i className='fi-search'></i>
        </InputGroup.Text>
        <Form.Control placeholder='Search site...' />
      </InputGroup>
      <hr className='d-sm-none my-2' />
      <DropdownSelect
        defaultValue='All categories'
        options={[
          [null, 'Accomodation'], // First element is an icon class, null means no icon
          [null, 'Food & Drink'],
          [null, 'Shopping'],
          [null, 'Art & History']
        ]}
        icon='fi-list'
        className='w-sm-50 border-end-md'
      />
    </Col>
    <hr className='d-md-none mt-2' />
    <Col md={5} className='d-sm-flex align-items-center pt-4 pt-md-0'>
      <div className='d-flex align-items-center w-100 pt-2 pb-4 py-sm-0 ps-3'>
        <i className='fi-cash fs-lg text-muted me-2'></i>
        <span className='text-muted'>Price</span>
        <div className='range-slider'>
          <Nouislider
            range={{min: 0, max: 1000}}
            start={450}
            format={{
              to: value => '$' + parseInt(value, 10),
              from: value => Number(value)
            }}
            connect={`lower`}
            tooltips
            className='range-slider-ui'
          />
        </div>
      </div>
      <Button variant='primary w-100 w-md-auto'>Search</Button>
    </Col>
  </Row>
</FormGroup>

Pill shape



Price
import FormGroup from '../components/FormGroup'
import DropdownSelect from '../../components/DropdownSelect'
import Form from 'react-bootstrap/Form'
import InputGroup from 'react-bootstrap/InputGroup'
import Button from 'react-bootstrap/Button'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import Nouislider from 'nouislider-react'
import 'nouislider/distribute/nouislider.css'

{/* Form group pill shape: Multiple controls (Responsive) */}
<FormGroup className='d-block rounded-md-pill'>
  <Row className='g-0 ms-sm-n2'>
    <Col md={7} className='d-sm-flex align-items-center'>
      <InputGroup className='w-sm-50 border-end-sm'>
        <InputGroup.Text className='text-muted'>
          <i className='fi-search'></i>
        </InputGroup.Text>
        <Form.Control placeholder='Search site...' />
      </InputGroup>
      <hr className='d-sm-none my-2' />
      <DropdownSelect
        defaultValue='All categories'
        options={[
          [null, 'Accomodation'], // First element is an icon class, null means no icon
          [null, 'Food & Drink'],
          [null, 'Shopping'],
          [null, 'Art & History']
        ]}
        icon='fi-list'
        className='w-sm-50 border-end-md'
      />
    </Col>
    <hr className='d-md-none mt-2' />
    <Col md={5} className='d-sm-flex align-items-center pt-4 pt-md-0'>
      <div className='d-flex align-items-center w-100 pt-2 pb-4 py-sm-0 ps-3'>
        <i className='fi-cash fs-lg text-muted me-2'></i>
        <span className='text-muted'>Price</span>
        <div className='range-slider'>
          <Nouislider
            range={{min: 0, max: 1000}}
            start={450}
            format={{
              to: value => '$' + parseInt(value, 10),
              from: value => Number(value)
            }}
            connect={`lower`}
            tooltips
            className='range-slider-ui'
          />
        </div>
      </div>
      <Button variant='primary rounded-pill w-100 w-md-auto'>Search</Button>
    </Col>
  </Row>
</FormGroup>

Sizing

import FormGroup from '../components/FormGroup'
import Form from 'react-bootstrap/Form'
import InputGroup from 'react-bootstrap/InputGroup'
import Button from 'react-bootstrap/Button'

{/* Large form group */}
<FormGroup>
  <InputGroup size='lg'>
    <InputGroup.Text className='text-muted'>
      <i className='fi-search'></i>
    </InputGroup.Text>
    <Form.Control placeholder='Search query...' />
  </InputGroup>
  <Button variant='translucent-primary' size='lg'>Search</Button>
</FormGroup>

{/* Normal form group */}
<FormGroup>
  <InputGroup>
    <InputGroup.Text className='text-muted'>
      <i className='fi-search'></i>
    </InputGroup.Text>
    <Form.Control placeholder='Search query...' />
  </InputGroup>
  <Button variant='translucent-primary'>Search</Button>
</FormGroup>

{/* Small form group */}
<FormGroup>
  <InputGroup size='sm'>
    <InputGroup.Text className='text-muted'>
      <i className='fi-search'></i>
    </InputGroup.Text>
    <Form.Control placeholder='Search query...' />
  </InputGroup>
  <Button variant='translucent-primary' size='sm'>Search</Button>
</FormGroup>

Light version

import FormGroup from '../../components/FormGroup'
import DropdownSelect from '../../components/DropdownSelect'
import Form from 'react-bootstrap/Form'
import InputGroup from 'react-bootstrap/InputGroup'
import Button from 'react-bootstrap/Button'
import Nouislider from 'nouislider-react'
import 'nouislider/distribute/nouislider.css'

{/* Light form group: Text input + Button */}
<FormGroup light>
  <Form.Control placeholder='Text input' />
  <Button variant='primary'>Button</Button>
</FormGroup>

{/* Light form group: Select + Button */}
<FormGroup light>
  <Form.Select defaultValue='default'>
    <option value='default' disabled>Select box</option>
    <option value='1'>Option item 1</option>
    <option value='2'>Option item 2</option>
    <option value='3'>Option item 3</option>
  </Form.Select>
  <Button variant='primary'>Button</Button>
</FormGroup>


{/* Light form group: Input group + Button */}
<FormGroup light>
  <InputGroup>
    <InputGroup.Text className='text-muted'>
      <i className='fi-camera-plus'></i>
    </InputGroup.Text>
    <Form.Control placeholder='Input group' />
  </InputGroup>
  <Button variant='primary'>Button</Button>
</FormGroup>


{/* Light form group: Dropdown + Button */}
<FormGroup light>
  <DropdownSelect
    defaultValue='Dropdown here'
    options={[
      [null, 'Action'], // First element is an icon class, null means no icon
      [null, 'Another action'],
      [null, 'Something else here'],
      [null, 'Yet another action']
    ]}
    darkMenu
  />
  <Button variant='primary' className='ms-auto'>Button</Button>
</FormGroup>

{/* Light form group: Range slider + Button */}
<FormGroup light>
  <div className='range-slider'>
    <Nouislider
      range={{min: 0, max: 1000}}
      start={450}
      format={{
        to: value => '$' + parseInt(value, 10),
        from: value => Number(value)
      }}
      connect={`lower`}
      tooltips
      className='range-slider-ui'
    />
  </div>
  <Button variant='primary'>Button</Button>
</FormGroup>