styled-forms v0.0.29

styled-forms

Usage

  import { Textfield, Textarea, Checkbox, Select, Group, Label } from 'styled-forms';

  <Textfield name="email" label="Email" placeholder="Type your Email" />
  <Textfield name="password" type="password" label="Password" placeholder="Password" />
  <Textfield name="password2" error="error here!" type="password" label="Password" placeholder="Password" />
  <Textarea name="textarea" label="Description" placeholder="Description" />
  <Textfield disabled name="email" label="Email Disabled" placeholder="Type your Email" />

  <Group>
    <Label>Terms and Conditions</Label>
    <Checkbox onChange={ () => console.log('changed') } name="email[]" label="Option 1" />
    <Checkbox disabled name="option[]" label="Option 2" />
    <Checkbox checked name="option[]" label="Option 3" />
    <Checkbox defaultChecked name="option[]" label="Option 4" />
  </Group>

  <Group>
    <Label>Age</Label>
    <Checkbox radio name="age" value="10" label="10 yrs. old" />
    <Checkbox defaultChecked radio name="age" value="18" label="18 yrs. old" />
  </Group>

  <Group inline>
    <Label>Inline Terms and Conditions</Label>
    <Checkbox name="email[]" label="I agree to the terms and conditions" />
    <Checkbox name="email[]" label="I have read privacy policy" />
    <Checkbox name="email[]" label="Another random checkbox" />
  </Group>

  <Select defaultValue="2" onChange={ (e, data = {}) => console.log(data.value) } name="email" label="Select Option">
    <option value={ 1 }>Option 1</option>
    <option value={ 2 }>Option 2</option>
  </Select>

  <Select onChange={ (e, data = {}) => console.log(data.value) } multiple name="email" label="Select Multiple Options">
    <option value={ 1 }>Option 1</option>
    <option value={ 2 }>Option 2</option>
    <option value={ 3 }>Option 3</option>
  </Select>