Radio

Radio is a control that allows the user to only choose one predefined option.

Default

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

Custom

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

With Error

Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).

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

Alignment

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

Disabled

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

Custom Children

Use the custom_children prop to enable the use of kits instead of text labels.

import React from 'react'

import { Radio, Select, Typeahead, Title } from 'playbook-ui'

const RadioChildren = (props) => {

  const options = [
    { label: 'Orange', value: 'Orange' },
    { label: 'Red', value: 'Red' },
    { label: 'Green', value: 'Green' },
    { label: 'Blue', value: 'Blue' },
  ]

  return (
    <div>
      <Radio
          customChildren
          label="Select"
          marginBottom="sm"
          name="Group1"
          tabIndex={0}
          value="Select"
      >
        <Select
            marginBottom="none"
            minWidth="xs"
            options={options}
        />
      </Radio>
      <Radio
          customChildren
          label="Typeahead"
          marginBottom="sm"
          name="Group1"
          tabIndex={0}
          value="Typeahead"
      >
        <Typeahead
            marginBottom="none"
            minWidth="xs"
            options={options}
        />
      </Radio>
      <Radio
          customChildren
          defaultChecked={false}
          label="Typography"
          name="Group1"
          value="Typography"
      >
        <Title
            text="Custom Typography"
        />
      </Radio>
    </div>
  )
}
export default RadioChildren

React Hook Form

You can pass react hook props to the radio kit.

import React from "react"

import { Radio, Flex, Body } from 'playbook-ui'import { useForm } from "react-hook-form"

const RadioReactHook = () => {
  const { register, watch } = useForm({
    defaultValues: {
      size: "Small",
    },
  })

  const selectedSize = watch("size", "Small")

  return (
    <Flex orientation="row">
      <Flex
          align="start"
          orientation="column"
          paddingRight="lg"
        >
        <Radio
            alignment="left"
            label="Small"
            marginBottom='sm'
            name="size"
            value="Small"
            {...register("size")}
        />
        <br />
        <Radio
            alignment="left"
            label="Medium"
            marginBottom='sm'
            name="size"
            value="Medium"
            {...register("size")}
        />
        <br />
        <Radio
            alignment="left"
            label="Large"
            marginBottom='sm'
            name="size"
            value="Large"
            {...register("size")}
        />
      </Flex>
      <Flex
          align="start"
          orientation="column"
      >
        <Body
            text={`Selected Size: ${selectedSize}`}
        />
      </Flex>
    </Flex>
  )
}

export default RadioReactHook

Things to Avoid

Try to avoid using if you have nested options.

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat