Toggle

<React.Fragment>
  <Toggle
    onChange={[Function handleChange]}
    selectedValue="Value 1"
    values={
      Array [
        "Value 1",
        "Value 2",
      ]
    }
  />
  <Text>
    Selected value is: 
    Value 1
  </Text>
</React.Fragment>
Selected value is: Value 1

Customizing

You can provide a custom render function to render custom toggle buttons. The render function will be called for each option and will receive the value, isSelected and a function called changeValue to trigger a value change.

<Toggle
  values={ [ 'deeppink', 'darkgray', 'black' ] }
  selectedValue={ selectedColor }
  onChange={ handleColorChange }
>
{ ({ value, isSelected, changeValue }: RenderToggleOptions): ReactElement => (
  <div
    style={{
      cursor: 'pointer',
      margin: 12,
      width: 12,
      height: 12,
      borderRadius: '100%',
      background: value,
      transform: isSelected ? 'scale(2)' : ''
    }}
    onClick={ (): void => changeValue(value) }
    key={ value }
  />
)}
</Toggle>
Selected color is: deeppink