Radio

Close

import React from 'react'

import Radio from '../_radio'

const RadioDefault = () => {
  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

Close

import React, { useState } from 'react'

import Radio from '../_radio'

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"
          {...props}
      >
        <input
            checked={choice === 'power'}
            name="custom"
            onChange={handleOnChange}
            type="radio"
            value="power"
            {...props}
        />
      </Radio>
      <br />
      <Radio
          className="my_custom_class"
          label="Custom Nitro"
          {...props}
      >
        <input
            checked={choice === 'nitro'}
            name="custom"
            onChange={handleOnChange}
            type="radio"
            value="nitro"
            {...props}
        />
      </Radio>
      <br />
      <Radio
          className="my_custom_class"
          label="Custom Google"
          {...props}
      >
        <input
            checked={choice === 'google'}
            name="custom"
            onChange={handleOnChange}
            type="radio"
            value="google"
            {...props}
        />
      </Radio>
    </div>
  )
}
export default RadioCustom

Close

import React from 'react'
import { Radio } from '../..'

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

Close

import React from 'react'
import { Flex, Radio } from '../../'

const RadioAlignment = () => {
  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