import React from 'react'

import Radio from 'playbook-ui'

const RadioDefault = (props) => {
  const ref = React.createRef()

  return (
    <div>
      <Radio
          label="Power"
          name="Group2"
          ref={ref}
          tabIndex={0}
          value="Power"
      />
      <br />
      <Radio
          defaultChecked={false}
          label="Nitro"
          name="Group2"
          value="Nitro"
      />
      <br />
      <Radio
          defaultChecked={false}
          label="Google"
          name="Group2"
          value="Google"
      />
    </div>
  )
}
export default RadioDefault

import React, { useState } from 'react'

import Radio from 'playbook-ui'

const RadioCustom = (props) => {
  const [choice, setChoice] = useState('power')

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

  return (
    <div>
      <p>
        {'Your choice is: '}
        <code>{choice}</code>
      </p>
      <br />
      <Radio
          className="my_custom_class"
          label="Custom Power"
      >
        <input
            checked={choice === 'power'}
            name="custom"
            onChange={handleOnChange}
            type="radio"
            value="power"
        />
      </Radio>
      <br />
      <Radio
          className="my_custom_class"
          label="Custom Nitro"
      >
        <input
            checked={choice === 'nitro'}
            name="custom"
            onChange={handleOnChange}
            type="radio"
            value="nitro"
        />
      </Radio>
      <br />
      <Radio
          className="my_custom_class"
          label="Custom Google"
      >
        <input
            checked={choice === 'google'}
            name="custom"
            onChange={handleOnChange}
            type="radio"
            value="google"
        />
      </Radio>
    </div>
  )
}
export default RadioCustom

import React from 'react'
import { Radio } from 'playbook-ui'

const RadioError = (props) => {
  return (
    <div>
      <Radio
          error
          label="Power"
          name="Group2"
          value="Power"
      />
    </div>
  )
}
export default RadioError

import React from 'react'
import { Flex, Radio } from 'playbook-ui'

const RadioAlignment = (props) => {
  return (
    <Flex>
      <Radio
          alignment="vertical"
          label="Power"
          marginRight="sm"
          name="Group2"
          tabIndex={0}
          value="Power"
      />
      <br />
      <Radio
          alignment="vertical"
          defaultChecked={false}
          label="Nitro"
          marginRight="sm"
          name="Group2"
          value="Nitro"
      />
      <br />
      <Radio
          alignment="vertical"
          defaultChecked={false}
          label="Google"
          name="Group2"
          value="Google"
      />
    </Flex>
  )
}

export default RadioAlignment

import React from 'react'

import Radio from 'playbook-ui'

const RadioDisabled = (props) => {
  const ref = React.createRef()

  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
        <Radio 
            disabled
            label="Disabled unselected"
            marginBottom="xs"
            name="DisabledGroup"
            ref={ref}
            tabIndex={0}
            value="Disabled unselected"
        />
        <Radio
            checked 
            disabled
            label="Disabled selected"
            name="DisabledGroup"
            value="Disabled selected"
        />
    </div>
  )
}
export default RadioDisabled