@arnat/styled-form
TypeScript icon, indicating that this package has built-in type declarations

0.0.12 • Public • Published

ARNAT - styled-form

npm Travis branch Codecov branch storybook lerna

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

Package Sidebar

Install

npm i @arnat/styled-form

Weekly Downloads

3

Version

0.0.12

License

MIT

Unpacked Size

173 kB

Total Files

13

Last publish

Collaborators

  • arnat.technologies
  • rsurjano