styled-form-component

The bootstrap form component made with styled-components.

This is a modular approach to use bootstrap components for quick prototypes, as an entrypoint of your own component library, or if you need just one bootstrap component for your application.

Installation

npm install --save styled-form-component
npm install --save styled-components@^4.1.3 react@^16.7.0 # Peer dependencies 

Usage

For detailed information take a look at the documentation.

import {
  Button,
  ButtonGroups,
  ButtonToolbar,
} from 'styled-form-component';
 
const MyFormComponent = (props) => (
  <form>
    <FormGroup>
      <label>Email address <FormControl type="email" placeholder="Enter email" /></label>
      <FormText muted>We&#39;ll never share your email with anyone else.</FormText>
    </FormGroup>
    <FormGroup>
      <label>Password <FormControl type="password" placeholder="Password" /></label>
    </FormGroup>
    <FormCheck>
      <label><FormCheckInput type="checkbox" /> Check me out</label>
    </FormCheck>
    <FormGroup>
      <Button block primary>Submit</Button>
    </FormGroup>
  </form>
);
 
const MyInputGroupComponent = (props) => (
  <InputGroup>
    <InputGroupPrepend>
      <InputGroupText>@</InputGroupText>
    </InputGroupPrepend>
    <FormControl type="text" placeholder="Username" />
  </InputGroup>
);

Properties

Properties which can be added to the component to change the visual appearance.

• inline only on FormCheck, FormControlPlainText Type: boolean
• disabled only on FormCheckInput, FormControl Type: boolean
• readonly only on FormControl Type: boolean
• valid only on FormControl Type: boolean
• invalid only on FormControl Type: boolean
• formInline only on FormControl, FormGroup Type: boolean
• sm small, only on FormControl, FormControlPlainText, FormGroup, InputGroup Type: boolean
• lg large, only on FormControl, FormControlPlainText, FormGroup, InputGroup Type: boolean
• multiple only on FormControl Type: boolean
• select only on FormControl Type: boolean
• textarea only on FormControl Type: boolean
• pill only on FormControl Type: boolean
• noRadius only on FormControl, FormGroup Type: boolean
• row only on FormGroup Type: boolean
• nomb no margin-bottom, only on FormGroup Type: boolean
• justify only on FormGroup Type: boolean
• muted only on FormText Type: boolean

License

MIT © Lukas Aichbauer