Sha256: 1562443ff3913a9ac05095d17cccad625b7bb2bb55fdbd0c7dca8ccd0b4949b2

Contents?: true

Size: 1.22 KB

Versions: 1169

Compression:

Stored size: 1.22 KB

Contents

// @flow

import React, { useState } from 'react'
import { Caption, Title, Toggle } from '../..'

const ToggleCustomRadio = () => {
  const [choice, setChoice] = useState('walk')

  const handleOnChange = ({ target }) => {
    setChoice(target.value)
  }

  return (
    <>
      <Title
          size={4}
          text="Select one option:"
      />

      <br />

      <Caption
          text="Walk"
      />
      <Toggle
          checked={choice}
          size="sm"
      >
        <input
            name="modes of transportation"
            onChange={handleOnChange}
            type="radio"
            value="walk"
        />
      </Toggle>

      <br />

      <Caption
          text="Bike"
      />
      <Toggle
          size="sm"
      >
        <input
            name="modes of transportation"
            onChange={handleOnChange}
            type="radio"
            value="bike"
        />
      </Toggle>

      <br />

      <Caption
          text="Ride"
      />
      <Toggle
          size="sm"
      >
        <input
            name="modes of transportation"
            onChange={handleOnChange}
            type="radio"
            value="ride"
        />
      </Toggle>
    </>
  )
}

export default ToggleCustomRadio

Version data entries

1,169 entries across 1,169 versions & 2 rubygems

Version Path
playbook_ui_docs-13.28.0.pre.alpha.PLAY1338alpha3001 app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx
playbook_ui-13.28.0.pre.alpha.PLAY1338alpha3001 app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx
playbook_ui_docs-13.28.0.pre.alpha.PLAY1343fixTooltiprunwayissue2987 app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx
playbook_ui-13.28.0.pre.alpha.PLAY1343fixTooltiprunwayissue2987 app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx
playbook_ui_docs-13.28.0.pre.alpha.PLAY1343fixTooltiprunwayissue2986 app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx
playbook_ui-13.28.0.pre.alpha.PLAY1343fixTooltiprunwayissue2986 app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx
playbook_ui_docs-13.28.0.pre.alpha.PLAY1343fixTooltiprunwayissue2984 app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx
playbook_ui-13.28.0.pre.alpha.PLAY1343fixTooltiprunwayissue2984 app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx
playbook_ui_docs-13.27.0 app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx
playbook_ui-13.27.0 app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx
playbook_ui_docs-13.26.0.pre.alpha.PBNTR291Dropdownrailsv22840 app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx
playbook_ui-13.26.0.pre.alpha.PBNTR291Dropdownrailsv22840 app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx
playbook_ui_docs-13.26.0.pre.alpha.jasoncypretpatch12820 app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx
playbook_ui-13.26.0.pre.alpha.jasoncypretpatch12820 app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx
playbook_ui_docs-13.26.0.pre.alpha.jasoncypretpatch12816 app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx
playbook_ui-13.26.0.pre.alpha.jasoncypretpatch12816 app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx
playbook_ui_docs-13.25.0.pre.alpha.PBNTR291Dropdownrailsv22812 app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx
playbook_ui-13.25.0.pre.alpha.PBNTR291Dropdownrailsv22812 app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx
playbook_ui_docs-13.26.0 app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx
playbook_ui-13.26.0 app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx