@arnat/styled-form NPM

ARNAT - styled-form

Modular approach to use bootstrap components for quick prototypes, as an entrypoint of the component library.

Usage

import { Button, ButtonGroups, ButtonToolbar } from '@arnat/styled-form';

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