.

<SegmentedControl> – a good-lookin' segmented control React component

<FormsySegmentedControl> – a version for Formsy

• UX background
• Component
• Usage
  • Plain
  • Formsy
• Development
  • Credits

UX background

In iOS, a segmented control is usually used to display different views (the equivalent of tabs in material design). However, segmented controls are increasingly being used in lieu of plain radio buttons or select inputs (dropdowns, or material menus). See for instance the designer lukew's recommendations:

• Dropdowns should be the UI of Last Resort
• Obvious Always Wins
• Video: Using Radio Groups for Input

Other good choices are radio groups, like this Ionic component, or a button list, as used in the Yo or Thumbtack apps, that looks the same, except on click, instead of seeing a checkmark, you're taken to the next screen.

A similar component in material design is the toggle button.

Component

Demo: lorensr.me/segmented-control

Usage

npm install --save segmented-control

Plain

<SegmentedControl> props:

• name: PropTypes.string.isRequired: name of the radio <input>s. Also the attribute included in the first argument of Formsy's onSubmit.
• options: PropTypes.array.isRequired: each an object with:
  • label: display text
  • value: value passed to setValue and Formsy's onSubmit
  • default: true: one object must have this
  • disabled: true: optional
• style: PropTypes.object: common styles are width and color
• setValue: PropTypes.func: callback on input change, passed the value string. Called once initially with the default value on mount.

import { SegmentedControl } from 'segmented-control'

<SegmentedControl
  name="oneDisabled"
  options={[
    { label: "One", value: "one", disabled: true },
    { label: "Two", value: "two" },
    { label: "Three", value: "three", default: true },
    { label: "Four", value: "four" }
  ]}
  setValue={newValue => this.doSomething(newValue)}
  style={{ width: 400, color: '#ab47bc' }} // purple400
  />

Formsy

<FormsySegmentedControl> has the same props, but includes Formsy.Mixin and calls Formsy's setValue, so that the value is included in onSubmit (see the event triggered by submitting the demo form). In the example below, the first arg of onSubmit would be {exampleInput: 'two'}:

import Formsy from 'formsy-react'
import RaisedButton from 'material-ui/RaisedButton'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import { FormsySegmentedControl } from 'segmented-control'

<MuiThemeProvider>
  <Formsy.Form
    onValidSubmit={this.onSubmit}
    >
    <FormsySegmentedControl
      name="exampleInput"
      options={[
        { label: "One", value: "one" },
        { label: "Two", value: "two", default: true },
        { label: "Three", value: "three" }
      ]}
      style={{ width: 300, color: 'rgb(0, 188, 212)' }} // match default material-ui primary teal
      />
    <RaisedButton
      type="submit"
      label="submit formsy form"
      style={{
        display: 'block',
        width: 200,
        margin: "20px auto"
      }}
      primary
      />
  </Formsy.Form>
</MuiThemeProvider>

Development

git clone [email protected]:lorensr/segmented-control.git
npm install
npm run storybook

http://localhost:9009

Credits

• Contributions by these fine folks
• CSS from @fstgerm: http://code.fstgerm.com/pure-css-segmented-controls/