Form

import React from 'react';
import { Button, Form, FormGroup, FormGroupButton, Label, Input, Col } from 'seduo-ui';
export default class Example extends React.Component {
    render() {
        return (
            <Form>
                <FormGroup>
                    <Label for="exampleEmail">Email</Label>
                    <Input type="email" name="email" id="exampleEmail" placeholder="with a placeholder" />
                </FormGroup>
                <FormGroup>
                    <Label for="examplePassword">Password</Label>
                    <Input type="password" name="password" id="examplePassword" placeholder="password placeholder" />
                </FormGroup>
                <FormGroup>
                    <Label for="exampleSelect">Select</Label>
                    <Input type="select" name="select" id="exampleSelect">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </Input>
                </FormGroup>
                <FormGroupButton>
                    <Button color="primary" block type="submit">
                        Odeslat
                    </Button>
                </FormGroupButton>
            </Form>
        );
    }
}

import React from 'react';
import { Button, Form, FormGroup, Label, Input, FormText } from 'seduo-ui';
export default class Example extends React.Component {
    render() {
        return (
            <Form>
                <FormGroup>
                    <Label for="exampleEmail">Email</Label>
                    <Input type="email" name="email" id="exampleEmail" placeholder="with a placeholder" />
                </FormGroup>
                <FormGroup>
                    <Label for="examplePassword">Password</Label>
                    <Input type="password" name="password" id="examplePassword" placeholder="password placeholder" />
                </FormGroup>
                <FormGroup>
                    <Label for="exampleSelect">Select</Label>
                    <Input type="select" name="select" id="exampleSelect">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </Input>
                </FormGroup>
                <FormGroup>
                    <Label for="exampleSelectMulti">Select Multiple</Label>
                    <Input type="select" name="selectMulti" id="exampleSelectMulti" multiple>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </Input>
                </FormGroup>
                <FormGroup>
                    <Label for="exampleText">Text Area</Label>
                    <Input type="textarea" name="text" id="exampleText" />
                </FormGroup>
                <FormGroup>
                    <Label for="exampleFile">File</Label>
                    <Input type="file" name="file" id="exampleFile" />
                    <FormText color="muted">
                        This is some placeholder block-level help text for the above input. It's a bit lighter and
                        easily wraps to a new line.
                    </FormText>
                </FormGroup>
                <FormGroup tag="fieldset">
                    <legend>Radio Buttons</legend>
                    <FormGroup check>
                        <Label check>
                            <Input type="radio" name="radio1" /> Option one is this and that—be sure to include why it's
                            great
                        </Label>
                    </FormGroup>
                    <FormGroup check>
                        <Label check>
                            <Input type="radio" name="radio1" /> Option two can be something else and selecting it will
                            deselect option one
                        </Label>
                    </FormGroup>
                    <FormGroup check disabled>
                        <Label check>
                            <Input type="radio" name="radio1" disabled /> Option three is disabled
                        </Label>
                    </FormGroup>
                </FormGroup>
                <FormGroup check>
                    <Label check>
                        <Input type="checkbox" /> Check me out
                    </Label>
                </FormGroup>
                <Button>Submit</Button>
            </Form>
        );
    }
}

Properties

Input.propTypes = {
  children: PropTypes.node,
  // type can be things like text, password, (typical input types) as well as select and textarea, providing children as you normally would to those.
  type: PropTypes.string,
  size: PropTypes.string,
  bsSize: PropTypes.string,
  state: deprecated(PropTypes.string, 'Please use the prop "valid"'),
  valid: PropTypes.bool, // applied the is-valid class when true, does nothing when false
  invalid: PropTypes.bool, // applied the is-invalid class when true, does nothing when false
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  // ref will only get you a reference to the Input component, use innerRef to get a reference to the DOM input (for things like focus management).
  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  static: deprecated(PropTypes.bool, 'Please use the prop "plaintext"'),
  plaintext: PropTypes.bool,
  addon: PropTypes.bool,
  className: PropTypes.string,
  cssModule: PropTypes.object,
};

Form Grid

import React from 'react';
import { Col, Button, Form, FormGroup, Label, Input, FormText } from 'seduo-ui';
export default class Example extends React.Component {
    render() {
        return (
            <Form>
                <FormGroup row>
                    <Label for="exampleEmail" sm={2}>
                        Email
                    </Label>
                    <Col sm={10}>
                        <Input type="email" name="email" id="exampleEmail" placeholder="with a placeholder" />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Label for="examplePassword" sm={2}>
                        Password
                    </Label>
                    <Col sm={10}>
                        <Input
                            type="password"
                            name="password"
                            id="examplePassword"
                            placeholder="password placeholder"
                        />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Label for="exampleSelect" sm={2}>
                        Select
                    </Label>
                    <Col sm={10}>
                        <Input type="select" name="select" id="exampleSelect" />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Label for="exampleSelectMulti" sm={2}>
                        Select Multiple
                    </Label>
                    <Col sm={10}>
                        <Input type="select" name="selectMulti" id="exampleSelectMulti" multiple />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Label for="exampleText" sm={2}>
                        Text Area
                    </Label>
                    <Col sm={10}>
                        <Input type="textarea" name="text" id="exampleText" />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Label for="exampleFile" sm={2}>
                        File
                    </Label>
                    <Col sm={10}>
                        <Input type="file" name="file" id="exampleFile" />
                        <FormText color="muted">
                            This is some placeholder block-level help text for the above input. It's a bit lighter and
                            easily wraps to a new line.
                        </FormText>
                    </Col>
                </FormGroup>
                <FormGroup tag="fieldset" row>
                    <legend className="col-form-label col-sm-2">Radio Buttons</legend>
                    <Col sm={10}>
                        <FormGroup check>
                            <Label check>
                                <Input type="radio" name="radio2" /> Option one is this and that—be sure to include why
                                it's great
                            </Label>
                        </FormGroup>
                        <FormGroup check>
                            <Label check>
                                <Input type="radio" name="radio2" /> Option two can be something else and selecting it
                                will deselect option one
                            </Label>
                        </FormGroup>
                        <FormGroup check disabled>
                            <Label check>
                                <Input type="radio" name="radio2" disabled /> Option three is disabled
                            </Label>
                        </FormGroup>
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Label for="checkbox2" sm={2}>
                        Checkbox
                    </Label>
                    <Col
                        sm={{
                            size: 10,
                        }}
                    >
                        <FormGroup check>
                            <Label check>
                                <Input type="checkbox" id="checkbox2" /> Check me out
                            </Label>
                        </FormGroup>
                    </Col>
                </FormGroup>
                <FormGroup check row>
                    <Col
                        sm={{
                            size: 10,
                            offset: 2,
                        }}
                    >
                        <Button>Submit</Button>
                    </Col>
                </FormGroup>
            </Form>
        );
    }
}

Inline Form

import React from 'react';
import { Button, Form, FormGroup, Label, Input } from 'seduo-ui';
export default class Example extends React.Component {
    render() {
        return (
            <Form inline>
                <FormGroup className="mb-2 mr-sm-2 mb-sm-0">
                    <Label for="exampleEmail" className="mr-sm-2">
                        Email
                    </Label>
                    <Input type="email" name="email" id="exampleEmail" placeholder="something@idk.cool" />
                </FormGroup>
                <FormGroup className="mb-2 mr-sm-2 mb-sm-0">
                    <Label for="examplePassword" className="mr-sm-2">
                        Password
                    </Label>
                    <Input type="password" name="password" id="examplePassword" placeholder="don't tell!" />
                </FormGroup>
                <Button>Submit</Button>
            </Form>
        );
    }
}

Form Validation

import React from 'react';
import { Form, FormGroup, Label, Input, FormFeedback, FormText } from 'seduo-ui';
export default class Example extends React.Component {
    render() {
        return (
            <Form>
                <FormGroup>
                    <Label for="exampleEmail">Input without validation</Label>
                    <Input />
                    <FormFeedback>You will not be able to see this</FormFeedback>
                    <FormText>Example help text that remains unchanged.</FormText>
                </FormGroup>
                <FormGroup>
                    <Label for="exampleEmail">Valid input</Label>
                    <Input valid />
                    <FormFeedback valid>Sweet! that name is available</FormFeedback>
                    <FormText>Example help text that remains unchanged.</FormText>
                </FormGroup>
                <FormGroup>
                    <Label for="examplePassword">Invalid input</Label>
                    <Input invalid />
                    <FormFeedback>Oh noes! that name is already taken</FormFeedback>
                    <FormText>Example help text that remains unchanged.</FormText>
                </FormGroup>
            </Form>
        );
    }
}

Input Types

import React from 'react';
import { Form, FormGroup, Label, Input, FormText } from 'seduo-ui';
export default class Example extends React.Component {
    render() {
        return (
            <Form>
                <FormGroup>
                    <Label for="exampleEmail">Plain Text (Static)</Label>
                    <Input plaintext value="Some plain text/ static value" />
                </FormGroup>
                <FormGroup>
                    <Label for="exampleEmail">Email</Label>
                    <Input type="email" name="email" id="exampleEmail" placeholder="with a placeholder" />
                </FormGroup>
                <FormGroup>
                    <Label for="examplePassword">Password</Label>
                    <Input type="password" name="password" id="examplePassword" placeholder="password placeholder" />
                </FormGroup>
                <FormGroup>
                    <Label for="exampleUrl">Url</Label>
                    <Input type="url" name="url" id="exampleUrl" placeholder="url placeholder" />
                </FormGroup>
                <FormGroup>
                    <Label for="exampleNumber">Number</Label>
                    <Input type="number" name="number" id="exampleNumber" placeholder="number placeholder" />
                </FormGroup>
                <FormGroup>
                    <Label for="exampleDatetime">Datetime</Label>
                    <Input type="datetime" name="datetime" id="exampleDatetime" placeholder="datetime placeholder" />
                </FormGroup>
                <FormGroup>
                    <Label for="exampleDate">Date</Label>
                    <Input type="date" name="date" id="exampleDate" placeholder="date placeholder" />
                </FormGroup>
                <FormGroup>
                    <Label for="exampleTime">Time</Label>
                    <Input type="time" name="time" id="exampleTime" placeholder="time placeholder" />
                </FormGroup>
                <FormGroup>
                    <Label for="exampleColor">Color</Label>
                    <Input type="color" name="color" id="exampleColor" placeholder="color placeholder" />
                </FormGroup>
                <FormGroup>
                    <Label for="exampleSearch">Search</Label>
                    <Input type="search" name="search" id="exampleSearch" placeholder="search placeholder" />
                </FormGroup>
                <FormGroup>
                    <Label for="exampleSelect">Select</Label>
                    <Input type="select" name="select" id="exampleSelect">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </Input>
                </FormGroup>
                <FormGroup>
                    <Label for="exampleSelectMulti">Select Multiple</Label>
                    <Input type="select" name="selectMulti" id="exampleSelectMulti" multiple>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </Input>
                </FormGroup>
                <FormGroup>
                    <Label for="exampleText">Text Area</Label>
                    <Input type="textarea" name="text" id="exampleText" />
                </FormGroup>
                <FormGroup>
                    <Label for="exampleFile">File</Label>
                    <Input type="file" name="file" id="exampleFile" />
                    <FormText color="muted">
                        This is some placeholder block-level help text for the above input. It's a bit lighter and
                        easily wraps to a new line.
                    </FormText>
                </FormGroup>
                <FormGroup check>
                    <Label check>
                        <Input type="radio" /> Option one is this and that—be sure to include why it's great
                    </Label>
                </FormGroup>
                <FormGroup check>
                    <Label check>
                        <Input type="checkbox" /> Check me out
                    </Label>
                </FormGroup>
            </Form>
        );
    }
}

Inline checkboxes

import React from 'react';
import { Form, FormGroup, Label, Input } from 'seduo-ui';
export default class Example extends React.Component {
    render() {
        return (
            <Form>
                <FormGroup check inline>
                    <Label check>
                        <Input type="checkbox" /> Some input
                    </Label>
                </FormGroup>
                <FormGroup check inline>
                    <Label check>
                        <Input type="checkbox" /> Some other input
                    </Label>
                </FormGroup>
            </Form>
        );
    }
}

Input Sizing

import React from 'react';
import { Form, Input } from 'seduo-ui';
export default class Example extends React.Component {
    render() {
        return (
            <Form>
                <Input placeholder="lg" bsSize="lg" />
                <Input placeholder="default" />
                <Input placeholder="sm" bsSize="sm" />
                <Input type="select" bsSize="lg">
                    <option>Large Select</option>
                </Input>
                <Input type="select">
                    <option>Default Select</option>
                </Input>
                <Input type="select" bsSize="sm">
                    <option>Small Select</option>
                </Input>
            </Form>
        );
    }
}

Input Grid Sizing

import React from 'react';
import { Col, Form, FormGroup, Label, Input } from 'seduo-ui';
export default class Example extends React.Component {
    render() {
        return (
            <Form>
                <FormGroup row>
                    <Label for="exampleEmail" sm={2} size="lg">
                        Email
                    </Label>
                    <Col sm={10}>
                        <Input type="email" name="email" id="exampleEmail" placeholder="lg" bsSize="lg" />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Label for="exampleEmail2" sm={2}>
                        Email
                    </Label>
                    <Col sm={10}>
                        <Input type="email" name="email" id="exampleEmail2" placeholder="default" />
                    </Col>
                </FormGroup>
            </Form>
        );
    }
}

Hidden Labels

import React from 'react';
import { Button, Form, FormGroup, Label, Input } from 'seduo-ui';
export default class Example extends React.Component {
    render() {
        return (
            <Form inline>
                <FormGroup>
                    <Label for="exampleEmail" hidden>
                        Email
                    </Label>
                    <Input type="email" name="email" id="exampleEmail" placeholder="Email" />
                </FormGroup>{' '}
                <FormGroup>
                    <Label for="examplePassword" hidden>
                        Password
                    </Label>
                    <Input type="password" name="password" id="examplePassword" placeholder="Password" />
                </FormGroup>{' '}
                <Button>Submit</Button>
            </Form>
        );
    }
}