@react-spectre/form

Installation

yarn add @react-spectre/form

npm install @react-spectre/form --save

Usage

Form

There are 7 components exported for form: FormGroup, Input, TextArea, Select, Radio, CheckBox and Switch.

import { FormGroup, Input, TextArea, Select, Radio, CheckBox, Switch } from '@react-spectre/form'

FormGroup

A form group is a wrapper for form controls.

<FormGroup label="Name">
  <Input />
</FormGroup>

Input

<Input />              // Default type="text"
<Input type="email" />

TextArea

<TextArea />
<TextArea rows="3" />

Select

<Select>
  <option>Choose an option</option>
  <option>Slack</option>
  <option>Skype</option>
  <option>Hipcat</option>
</Select>

<Select multiple>
  <option>Choose an option</option>
  <option>Slack</option>
  <option>Skype</option>
  <option>Hipcat</option>
</Select>

Radio

<FormGroup label="Genre">
  <Radio label="Male"   name="genre" defaultChecked>
  <Radio label="Female" name="genre">
</FormGroup>

CheckBox

<FormGroup>
  <CheckBox label="Remember me">
  <CheckBox label="Remember me" defaultChecked>
</FormGroup>

Switch

<FormGroup>
  <Switch label="Send me emails with news and tips">
  <Switch label="Send me emails with news and tips" defaultChecked>
</FormGroup>