### Usage 

```js static
import {Form} from 'react-bootify';
/* or */
import Form from 'react-bootify/components/form';
```


### Sample of Inline Form

```js

import {Tag} from 'react-bootify';

<Form inline>
    <Form.Group>
        <Form.Label>
            Password
        </Form.Label>
        <Form.Input type="password" margin={{left:3, right:3}}/>
        <Tag tag='small' text='muted' id="passwordHelpInline">
            Must be 8-20 characters long.
        </Tag>
    </Form.Group>
</Form>

```


```js


<Form >
    <Form.Row group>
        <Form.Col text='right' width={{xs:4, sm:3, md:2}}>
            <Form.Label inline ><small>Company name</small></Form.Label>
        </Form.Col>
        <Form.Col>
            <Form.Input type="text"/>
        </Form.Col>
    </Form.Row>

    <Form.Row group>
        <Form.Col text='right' width={{xs:4, sm:3, md:2}}>
            <Form.Label inline ><small>Bought at</small></Form.Label>
        </Form.Col>
        <Form.Col>
            <Form.Input type="text"/>
        </Form.Col>
    </Form.Row>
</Form>

```

```js

import {Container, Tag, Dropdown, Button, Card} from 'react-bootify';

class Sample1 extends React.Component {


    constructor(props) {
        super(props);

        this.state = {};
        this.state.stock = {};
        this.state.loading = false;
    }

    onTextChange(event) {
        var stock = this.state.stock;
        stock[event.target.id] = event.target.value;
        this.setState({stock:stock});
    }

    onSourceChange(source) {
        var stock = this.state.stock;
        stock.source = source;
        this.setState({stock:stock});
    }

    onSaveChanges() {
        console.log(this.state.stock);
    }

    render() {
        return (

                <Form >
                    <Form.Row group>
                        <Form.Col width={{xs:4, sm:3, md:2}} text='right' >
                            <Form.Label inline text='muted'>
                                <small>Ticker</small>
                            </Form.Label>
                        </Form.Col>
                        <Form.Col width={{xs:8, sm:9, md:10}} text='right' >
                            <Form.Input type="text" id="ticker" placeholder="Ticker" onChange={this.onTextChange.bind(this)}/>
                        </Form.Col>
                    </Form.Row>

                    <Form.Row group>
                        <Form.Col width={{xs:4, sm:3, md:2}} text='right' >
                            <Form.Label inline text='muted'>
                                <small>Company name</small>
                            </Form.Label>
                        </Form.Col>
                        <Form.Col width={{xs:8, sm:9, md:10}}>
                            <Form.Input type="text" id="name" placeholder="Name" onChange={this.onTextChange.bind(this)}/>
                        </Form.Col>
                    </Form.Row>


                    <Form.Row group>
                        <Form.Col width={{xs:4, sm:3, md:2}} text='right' >
                            <Form.Label inline text='muted'>
                                <small>Bought at</small>
                            </Form.Label>
                        </Form.Col>
                        <Form.Col width={{xs:8, sm:9, md:10}}>
                            <Form.Input type="text" id="price" placeholder="Price" onChange={this.onTextChange.bind(this)}/>
                        </Form.Col>
                    </Form.Row>

                    <Form.Row group>
                        <Form.Col width={{xs:4, sm:3, md:2}} text='right' >
                            <Form.Label inline text='muted'>
                                <small>
                                    Number of stocks
                                </small>
                            </Form.Label>
                        </Form.Col>
                        <Form.Col width={{xs:8, sm:9, md:10}}>
                            <Form.Input type="text" id="amount" placeholder="Amount" onChange={this.onTextChange.bind(this)}/>
                        </Form.Col>
                    </Form.Row>

                    <Form.Row group>
                        <Form.Col width={{xs:4, sm:3, md:2}} text='right' >
                            <Form.Label inline text='muted'>
                                <small>
                                    Source
                                </small>
                            </Form.Label>
                        </Form.Col>

                        <Form.Col width={{xs:8, sm:9, md:10}}>
                            <Dropdown placement='bottom-start'>
                                <Dropdown.Target>
                                    <Button outline color='secondary'>
                                        {this.state.stock.source == undefined ? 'Select source' : this.state.stock.source}
                                    </Button>
                                </Dropdown.Target>
                                <Dropdown.Menu >
                                    <Dropdown.Item onClick={this.onSourceChange.bind(this, 'Twitter')}>
                                        Twitter
                                    </Dropdown.Item>
                                    <Dropdown.Item onClick={this.onSourceChange.bind(this, 'Facebook')}>
                                        Facebook
                                    </Dropdown.Item>
                                    <Dropdown.Item onClick={this.onSourceChange.bind(this, 'Pinterest')}>
                                        Pinterest
                                    </Dropdown.Item>
                                    <Dropdown.Separator/>
                                    <Dropdown.Item onClick={this.onSourceChange.bind(this, undefined)}>
                                        Reset
                                    </Dropdown.Item>
                                </Dropdown.Menu>
                            </Dropdown>
                        </Form.Col>
                    </Form.Row>


                    <Form.Row group>

                        <Form.Col width={{xs:4, sm:3, md:2}}>
                        </Form.Col>

                        <Form.Col width={{xs:8, sm:9, md:10}}>
                                <Form.Row group>
                                    <Form.Col width={{xs:12, lg:6}} padding={{bottom:2}}>
                                        <Card>
                                            <Card.Header style={{lineHeight:'50%'}}>
                                                <Tag tag='small' text='muted'>Stop Loss</Tag>
                                            </Card.Header>
                                            <Card.Body> 
                                                <Form inline padding={{bottom:2}} >
                                                    <Form.Radio text='muted'>
                                                        Continous stop loss
                                                    </Form.Radio>
                                                    <Form.Input style={{width:'4rem'}} margin={{left:2, right:2}} type="text" placeholder=""/>
                                                    <Form.Label text='muted'>%</Form.Label>
                                                </Form>

                                                <Form inline padding={{bottom:2}}>
                                                    <Form.Radio text='muted'>
                                                        When price below
                                                    </Form.Radio>
                                                    <Form.Input style={{width:'4rem'}} margin={{left:2, right:2}} type="text" placeholder=""/>
                                                </Form>
                            
                                                <Form inline padding={{bottom:2}}>
                                                    <Form.Radio placeholder="Ticker" text='muted'>
                                                        Price dropped more than 
                                                    </Form.Radio>
                                                    <Form.Input style={{width:'4rem'}} margin={{left:2, right:2}} type="text" placeholder=""/>
                                                    <Form.Label text='muted'>%</Form.Label>
                                                </Form>
                                            </Card.Body>
                                        </Card>
                                    </Form.Col>
                                    <Form.Col width={{xs:12, lg:6}} padding={{bottom:2}}>
                                        <Card>
                                            <Card.Header style={{lineHeight:'50%'}}>
                                                <Tag tag='small' text='muted'>Other options</Tag>
                                            </Card.Header>
                                            <Card.Body>
                                                ...
                                            </Card.Body>
                                        </Card>
                                    </Form.Col>
                                </Form.Row>

                        </Form.Col>
                    </Form.Row>
                    <Form.Row group text='right'>
                        <Form.Col>
                            <Button color='secondary' outline margin={{right:1}}>Cancel</Button>
                            <Button color='primary' margin={{left:1}} onClick={this.onSaveChanges.bind(this)} >Save changes</Button>
                        </Form.Col>
                    </Form.Row>
                </Form>
        );
    }
}


<Sample1/>
```



### Sample of Standard Form

```js


class Sample extends React.Component {


    constructor(props) {
        super(props);

        this.state = {};
        this.state.stock = {};
        this.state.stock.symbol   = 'AAPL';
        this.state.stock.name     = '';
        this.state.stock.industry = '';
        this.state.stock.exchange = '';
        this.state.stock.sector   = '';

        this.state.loading = false;


        this.onChange = this.onChange.bind(this);


    }

    onChange(event) {
        var stock = this.state.stock;
        stock[event.target.id] = event.target.value;
        this.setState({stock:stock});
    }

    render() {
        return (
                <Form>
                    <Form.Row>
                        <Form.Col>
                            <Form.Group>
                                <Form.Label>Symbol</Form.Label>
                                <Form.Input type="text" readOnly id="symbol" value={this.state.stock.symbol} onChange={this.onChange}/>
                            </Form.Group>
                        </Form.Col>
                    </Form.Row>
                    <Form.Row>
                        <Form.Col>
                            <Form.Group>
                                <Form.Label>Name</Form.Label>
                                <Form.Input type="text" disabled={this.state.loading} value={this.state.stock.name} placeholder="Name" onChange={this.onChange}/>
                            </Form.Group>
                        </Form.Col>
                    </Form.Row>
                    <Form.Row>
                        <Form.Col width={{md:6}}>
                            <Form.Group>
                                <Form.Label >Industry</Form.Label>
                                <Form.Input id='industry' type="text" disabled={this.state.loading} value={this.state.stock.industry} placeholder="Industry" onChange={this.onChange}/>
                            </Form.Group>
                        </Form.Col>
                        <Form.Col width={{md:6}}>
                            <Form.Group>
                                <Form.Label >Sector</Form.Label>
                                <Form.Input id='sector' type="text" disabled={this.state.loading} value={this.state.stock.sector} placeholder="Sector" onChange={this.onChange}/>
                            </Form.Group>
                        </Form.Col>
                    </Form.Row>

                    <Form.Row>
                        <Form.Col width={{md:6}}>
                            <Form.Group>
                                <Form.Label >Exchange</Form.Label>
                                <Form.Input id='exchange' type="text" disabled={this.state.loading} value={this.state.stock.exchange} placeholder="Industry" onChange={this.onChange}/>
                            </Form.Group>
                        </Form.Col>
                        <Form.Col width={{md:6}}>
                            <Form.Group>
                                <Form.Label >Type</Form.Label>
                                <Form.Input id='type' type="text" disabled={this.state.loading} value={this.state.stock.type} placeholder="Type" onChange={this.onChange}/>
                            </Form.Group>
                        </Form.Col>
                    </Form.Row>
                </Form>
        );
    }
}


<Sample/>
```


### Checkboxes


```js

import {Tag, Card} from 'react-bootify';

class Sample extends React.Component {


    constructor(props) {
        super(props);

        this.state = {};
        this.state.text = 'Utiquus';
        this.state.option = 'A';
        this.state.checkBoxA = true;
        this.state.checkBoxB = true;

        this.onChange = this.onChange.bind(this);
    }

    onChange(event) {

        state = this.state;

        switch(event.target.id) {
            case 'checkBoxA': {
                state.checkBoxA = event.target.value;
                break
            }
            case 'checkBoxB': {
                console.log('checkBoxB', event.target.value);
                state.checkBoxB = event.target.value == 'on';
                break
            }
            case 'radioA': {
                state.option = event.target.value ? 'A' : undefined;
                break
            }
            case 'radioB': {
                state.option = event.target.value ? 'B' : undefined;
                break
            }
            default: {
                if (event.target.id) {
                    this.state[event.target.id] = event.target.value;
                }
            
            }
        }

        this.setState(state);
    }

    render() {

        return (
                <Form>
                    <Form.Row>
                        <Form.Col>
                            <Form.Label >Utiquus</Form.Label>
                            <Form.Input id='text' type="text" value={this.state.text} onChange={this.onChange}/>
                        </Form.Col>
                    </Form.Row>

                    <Form.Row >
                        <Form.Col padding={{top:3}} width={{xs:12, sm:12, md:8, lg:9, xl:9}}>
                            <Card>
                                <Card.Body>
                                    <Form.Radio id='radioA' checked={this.state.option=='A'} onChange={this.onChange}>
                                        Aenean porttitor
                                    </Form.Radio>
                                    <Form.Radio id='radioB' checked={this.state.option=='B'} onChange={this.onChange}>
                                        Interdum et malesuada fames
                                    </Form.Radio>
                                </Card.Body>
                            </Card>
                        </Form.Col>
                        <Form.Col padding={{top:3}} width={{xs:12, sm:12, md:4, lg:3, xl:3}}>
                            <Card>
                                <Card.Body>
                                    <Form.Checkbox id='checkBoxA' checked={this.state.checkBoxA} onChange={this.onChange}>
                                        Cras eget felis
                                    </Form.Checkbox>
                                    <Form.Checkbox id='checkBoxB' checked={this.state.checkBoxB} onChange={this.onChange}>
                                        Duis at viverra
                                    </Form.Checkbox>
                                </Card.Body>
                            </Card>
                        </Form.Col>
                    </Form.Row>


                </Form>
        );
    }
}


<Sample/>
```


### Switches


```js

import {Tag, Fade, Alert} from 'react-bootify';

class Sample extends React.Component {

    constructor(props) {
        super(props);

        this.state = {};
        this.state.show = false;
    }

    toggle() {
        this.setState({show: !this.state.show});
        console.log(this.state.show);
    }


    render() {

        return (
            <Form>
                <Form.Row padding={2}>
                    <Form.Col>
                        <Form.Switch checked={this.state.show} onChange={this.toggle.bind(this)}>
                            <Tag text={this.state.show ? 'warning' : undefined}>
                                {this.state.show ? 'Warning displayed' : 'Display warning'}
                            </Tag>
                        </Form.Switch>
                    </Form.Col>
                </Form.Row>
                <Fade show={this.state.show}>
                    <Form.Row>
                        <Alert alert='warning' dismiss={this.toggle.bind(this)}>
                            <Alert.Header>
                                Ei vim aeque
                            </Alert.Header>
                            <Alert.Separator/>
                            <Alert.Body>
                                In has iisque consequuntur, verear hendrerit no sea, per mandamus convenire evertitur et. Sensibus voluptatum ea has. Putant equidem scriptorem.
                            </Alert.Body>
                        </Alert>
                    </Form.Row>
                </Fade>
            </Form>
        );
    }
}

<Sample/>

```

```js

import {Card} from 'react-bootify';

class Sample extends React.Component {

    constructor(props) {
        super(props);
    }


    render() {

        return (
            <Form>
                <Form.Row group>
                    <Form.Col padding={2} width={{xs:12, sm:12, md:6}}>
                        <Card padding={3}>
                            <Form.Col>
                                <Form.Switch>Lorem ipsum dolor</Form.Switch>
                                <Form.Switch>Nam molestie aliquam</Form.Switch>
                            </Form.Col>
                        </Card>
                    </Form.Col>

                    <Form.Col padding={2} width={{xs:12, sm:12, md:6}}>
                        <Card padding={3}>
                            <Form.Col>
                                <Form.Switch>Morbi eu</Form.Switch>
                                <Form.Switch>Pellentesque a</Form.Switch>
                            </Form.Col>
                        </Card>
                    </Form.Col>

                </Form.Row>
            </Form>
        );
    }
}

<Sample/>

```