A React component for form inputs with subtle and interesting effects

Why Use this?

Heres a few scenarios:

Tap your space bar. The focused toggle changes. Submit the simple ajax form example and look at the console output data changes form data

Tap your space bar. The focused toggle changes.
Submit the simple ajax form example and look at the console output data changes form data

Install

React Input Toggle is most easilily installed as an npm package

npm install --save react-input-toggle

Customization

Each effect is definined using sass variables which can be overridden as necessary. Take a look at the top of each effect's commented sass file for what can be modified. Ex: Lima's

Properties Reference

This component only requires a few properties, effect, labelPosition, and label. All other props such as checked or onChange follow the same conventions and logic as any standard react form component. I.e. if you create a Toggle with a checkedprop of true then it's checked state will always be true. This is known as a controlled component. See the react docs for further details.

Since a Toggle follows the same interface as a standard react <input type="checkbox"> any event handlers such as onChage, onFocus, etc. have the same function signatures as a standard react input. Additionly, props such as disabled, data-*, etc will correctly be passed down and be applied to the underlying input component.

Ex:


  /* making a controlled component, passing down custom attributes,
  setting default check state, event handlers, etc */
  <Toggle checked={false} data-myattr={'attr'}
    defaultChecked={false} onFocusCapture={this.func}  >

Custom Properties

Property	Type	Default	Description
`effect`	`string`	`sierra`	The style this element will take on.
`labelPosition`	`string`	`left`	The prefered position of the label. Will collapse to `top` or `bottom` if there is not enough space available. (uses flexbox layout model)
`label`	`string`	`''`	Text to be shown in the label.