Sha256: b8613c2a7e4032e9e57838e6bba96f5c5d24bef37762de28f85895c9c6bfad70

Contents?: true

Size: 993 Bytes

Versions: 944

Compression:

Stored size: 993 Bytes

Contents

import React, { useState } from 'react'
import { Caption, Title, Toggle } from 'playbook-ui'

const ToggleName = () => {
  const [choice, setChoice] = useState(false)

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

  return (
    <>
      <Title
          size={4}
          text="Which of the following vehicles do you own?"
      />

      <br />

      <Caption
          text="Car"
      />
      <Toggle
          checked={choice}
          size="sm"
      >
        <input
            name="vehicle"
            onChange={handleOnChange}
            type="checkbox"
            value="car"
        />
      </Toggle>

      <br />
      <Caption
          text="Bike"
      />
      <Toggle
          checked={choice}
          size="sm"
      >
        <input
            name="vehicle"
            onChange={handleOnChange}
            type="checkbox"
            value="bike"
        />
      </Toggle>

    </>
  )
}

export default ToggleName

Version data entries

944 entries across 944 versions & 2 rubygems

Version Path
playbook_ui_docs-14.11.1.pre.alpha.PLAY1750pbcontenttagkitbutton5340 app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx
playbook_ui-14.11.1.pre.alpha.PLAY1750pbcontenttagkitbutton5340 app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx
playbook_ui_docs-14.11.1.pre.alpha.PLAY1750pbcontenttagkitbutton5339 app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx
playbook_ui-14.11.1.pre.alpha.PLAY1750pbcontenttagkitbutton5339 app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx
playbook_ui_docs-14.12.0.pre.rc.3 app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx
playbook_ui-14.12.0.pre.rc.3 app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx
playbook_ui_docs-14.12.0.pre.rc.2 app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx
playbook_ui-14.12.0.pre.rc.2 app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx
playbook_ui_docs-14.12.0.pre.rc.1 app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx
playbook_ui-14.12.0.pre.rc.1 app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx
playbook_ui_docs-14.12.0.pre.rc.0 app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx
playbook_ui-14.12.0.pre.rc.0 app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx
playbook_ui_docs-14.10.0.pre.alpha.PLAY1774timelinelabelstepspacing5315 app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx
playbook_ui-14.10.0.pre.alpha.PLAY1774timelinelabelstepspacing5315 app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx
playbook_ui_docs-14.10.0.pre.alpha.PLAY1774timelinelabelstepspacing5314 app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx
playbook_ui-14.10.0.pre.alpha.PLAY1774timelinelabelstepspacing5314 app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx
playbook_ui_docs-14.10.0.pre.alpha.PLAY1750pbcontenttagkitbutton5308 app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx
playbook_ui-14.10.0.pre.alpha.PLAY1750pbcontenttagkitbutton5308 app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx
playbook_ui-14.11.1 app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx
playbook_ui_docs-14.11.0.pre.rc.17 app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx