Styled-form-component NPM

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