radio-button.md

Back to Polythene Radio Button main page

Radio Button component for Mithril

• 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
• Radio Group options

Usage

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

import m from "mithril"
import { RadioButton } from "polythene-mithril"

// Inferior solution
m("div", [
  m(RadioButton, {
    name: "company",
    value: "1",
    label: "One",
  }),
  m(RadioButton, {
    name: "company",
    value: "2",
    label: "Two",
  })
])

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 m from "mithril"
import { RadioGroup } from "polythene-mithril"

// Better solution
m(RadioGroup, {
  name: "company",
  buttons: [
    {
      value: "1",
      label: "One",
    },
    {
      value: "2",
      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:

m(RadioGroup, {
  onChange: state => vnode.state.checkedValue = state.value
})

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:

m(RadioGroup, {
  name: "company",
  buttons: [
    {
      value: "1",
      label: "One",
      defaultChecked: true
    },
    {
      value: "2",
      label: "Two",
    }
  ]
})

or use defaultCheckedValue on the group:

m(RadioGroup, {
  name: "company",
  defaultCheckedValue: "1",
  buttons: [
    {
      value: "1",
      label: "One",
    },
    {
      value: "2",
      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 m from "mithril"
import stream from "mithril/stream"
import { RadioGroup, Button } from "polythene-mithril"

const Form = () => {
  const formData = {
    name: "outside",
    defaultCheckedValue: "right",
    values: [
      {
        value: "left",
        label: "Left",
      },
      {
        value: "right",
        label: "Right",
      },
    ]
  }
  return {
    oninit: ({ state }) => {
      const checkedValue = stream(formData.defaultCheckedValue);
      Object.assign(state, {
        checkedValue,
      })
    },
    view: ({ state }) => {
      const checkedValue = state.checkedValue();
      return m("div", [
        m(RadioGroup, {
          name: formData.name,
          checkedValue,
          onChange: ({ value }) => state.checkedValue(value),
          content: formData.values
        }),
        // Simulate setting the radio button state from outside:
        m(".pe-button-row", [
          m(Button, {
            label: "Set Left",
            raised: true,
            events: {
              onclick: () => state.checkedValue("left"),
            }
          }),
          m(Button, {
            label: "Set Right",
            raised: true,
            events: {
              onclick: () => state.checkedValue("right"),
            }
          })
        ])
      ])
    }
  }
}

Shared options

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

m(RadioGroup, {
  name: "company",
  all: {
    className: "my-class"
  },
  buttons: [
    // ...
  ]
})

Appearance

Both Radio Button and Radio Group can be styled.

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"
})

m(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:

m(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