Slup - Controls

This package contains the Controls, a Material Design Component which is part of a bigger ecosystem called Slup

Description

From Google's Material Design guidelines:

Checkboxes allow the selection of multiple options from a set.
Radio buttons allow the selection of a single option from a set.
Switches allow a selection to be turned on or off.

Installation

This package can be installed with NPM

npm install --save @slup/controls

Usage

This example includes the checkbox

export class Test extends Component {
  state = {
    checked: false
  }

  handleChange() {
    this.setState({ checked: !this.state.checked })
  }

  render() {
    return (
      <Checkbox
        onChange={this.handleChange.bind(this)}
        checked={this.state.checked}
      />
    )
  }
}

This example includes the switch

export class Test extends Component {
  state = {
    checked: false
  }

  handleChange() {
    this.setState({ checked: !this.state.checked })
  }

  render() {
    return (
      <Switch
        onChange={this.handleChange.bind(this)}
        checked={this.state.checked}
      />
    )
  }
}

This example includes the radio

export class Test extends Component {
  state = {
    checked: 0
  }

  handleChange(i) {
    this.setState({ checked: i })
  }

  render() {
    return(
      <div>
        {[0, 1, 2].map(i =>
          <Radio
            onChange={e => this.handleChange.call(this, i)}
            checked={this.state.checked === i}
          />
        )}
      </div>
    )
  }
}

Available properties

Props	Type	Default	Documentation
onChange	function	none	Link
checked	boolean	false	Link
disabled	boolean	false	Link
size	number	16	Link
leftLabel / rightLabel	string	undefined	Link

Property: 'disabled'

This property will disabled the controls

<Checkbox disabled />
<Switch disabled />
<Radio disabled />

Property: 'size' [Checkbox, Radio]

With this property you can change the size of these two controls

<Checkbox size={56} />
<Radio size={32} />

Property: 'leftLabel / rightLabel'

These properties will provide a left/right-sided <Label /> that can display a given string. Use leftLabel for a left-handed label, rightLabel for the same result on the right. Or you can just use them both

<Checkbox leftLabel='Text' rightLabel='Text' />
<Switch leftLabel='Text' rightLabel='Text' />
<Radio leftLabel='Text' rightLabel='Text' />