Back to Polythene Radio Button main page

Radio Button component for React

• Options
• Usage
  • Reading and setting the checked state
    • Reading the checked state
    • Setting the checked state
    • Maintaining state
  • Shared options
• Appearance
  • Styling
    • Themed component
    • CSS
    • Style
  • RTL (right-to-left) support
  • Dark or light tone

Options

Radio Button options

Usage

Radio buttons always come in groups. To simply show 2 radio buttons, without handling their state, does not make much sense:

import React from "react"
import { RadioButton } from "polythene-react"

// Inferior solution
<div>
  <RadioButton 
    name="company"
    value="1"
    label="One"
  />
  <RadioButton 
    name="company"
    value="2"
    label="Two"
  />
</div>

Reading and setting the checked state

Radio Buttons will generally be used with a Radio Group that manages the buttons' (singular) selected state.

Equivalent to the example above, now including state handling:

import React from "react"
import { RadioGroup } from "polythene-react"

// Better solution
<RadioGroup
  name="company"
  buttons={[
    {
      value: "One",
      label: "One",
    },
    {
      value: "Two",
      label: "Two",
    }
  ]}
/>

Note that name is required when using RadioGroup.

See also Handling state.

Reading the checked state

To read the checked state, use onChange:

<RadioGroup
  onChange={state => this.setState({ checkedValue: state.value })}
/>

But unlike Checkbox, the checked state does not need to be set explicitly - this is handled by Radio Group:

Setting the checked state

Unlike Checkbox, the checked state does not need to be set explicitly - this is handled by Radio Group.

To set the initially checked radio button, pass defaultChecked to the button option:

[
  {
    value: "1",
    label: "One",
    defaultChecked: true
  },
  {
    value: "2",
    label: "Two",
  }
]

or use defaultCheckedValue on the group:

<RadioGroup
  name="company"
  defaultCheckedValue="1"
  buttons={[
    {
      value: "1",
      label: "One",
    },
    {
      value: "1",
      label: "Two",
    }
  ]}
/>

Maintaining state

If you want to maintain the radio button states yourself, for instance when using a state management solution like Meiosis or Redux, you can either:

• Set option checked on each Radio Button
• Set option checkedValue on the Radio Group

This example shows the latter method:

import React from "react"
import { RadioGroup, Button } from "polythene-react"

const formData = {
  name: "outside",
  defaultCheckedValue: "right",
  values: [
    {
      value: "left",
      label: "Left",
    },
    {
      value: "right",
      label: "Right",
    },
  ]
}

class Form extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      checkedValue: formData.defaultCheckedValue
    }
  }
  render() {
    const checkedValue = this.state.checkedValue
    return (
      <div>
        <RadioGroup
          name={formData.name}
          checkedValue={checkedValue}
          onChange={({ value }) => this.setState({ checkedValue: value })}
          content={formData.values}
        />
        {/* Simulate setting the radio button state from outside: */}
        <div className="pe-button-row">
          <Button
            label="Set Left"
            raised
            events={{
              onClick: () => this.setState({ checkedValue: "left" })
            }}
          />
          <Button
            label="Set Right"
            raised
            events={{
              onClick: () => this.setState({ checkedValue: "right" })
            }}
          />
        </div>
      </div>
    )
  }
}

Shared options

Use RadioGroup's option all to pass options that should be applied to all Radio Buttons.

<RadioGroup
  name="company"
  all={{
    className: "my-class"
  }}
  buttons={[
    // ...
  ]}
/>

Appearance

Both Radio Button and Radio Group can be styled using theme, style and CSS.

Styling

Below are examples how to change the Radio Button appearance, either with a theme or with CSS.

You can find more information about theming in Theming.

Themed component

import { RadioButtonCSS } from "polythene-css"

RadioButtonCSS.addStyle(".themed-radio-button", {
  color_light_on:    "#2196F3",
  color_light_off:   "#2196F3",
  color_light_label: "#2196F3"
})

<RadioButton className="themed-radio-button" />

CSS

Change CSS using the CSS classes:

• Radio Button CSS classes
• Radio Group CSS classes

Class names can be imported with:

import classes from "polythene-css-classes/radio-button"

Style

Some style attributes can be set using option style. For example:

<RadioButton
  style={{
    color: "#2196F3"
  }}
/>

RTL (right-to-left) support

The direction of the radio button icon and label is reversed when the Radio Button is contained within an element that either:

• has attribute dir="rtl"
• has className pe-rtl

Dark or light tone

If the component - or a component's parent - has option tone set to "dark", the component will be rendered with light colors on dark.

• Use tone: "dark" to render light on dark
• Use tone: "light" to locally render normally when dark tone is set