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