Radio

A radio button typically represents a single option in a mutually exclusive list (where only one item can be selected at a time). Formium provides either Radio and RadioGroup components for these two layers.

Used by

• Radio

Props

Typically, radio buttons are used in a group to choose one option from several, similar to how a <select> tag contains several <option> tags. In many popular open-source React component libraries (like Material UI, Ant Design, Blueprint.js, Chakra UI), there is a RadioGroup component that renders a series of Radio children, where RadioGroup is responsible for managing state and interaction.

With Formium React you can either specify Radio or RadioGroup components, with RadioGroup taking precendence.

If you specify RadioGroup, it is up to you to map through the provided list of options and render them accordingly. If you specify just Radio, FormiumForm will take care of grouping the series of choices in order.

Here are a few examples of how you might use a popular external libraries' RadioGroup's with FormiumForm:

import React from 'react';
import { Radio, RadioGroup } from '@blueprintjs/core';
const RadioGroup = ({ options, name, value, onChange, disabled }) => {
  return (
    <RadioGroup
      name={name}
      disabled={disabled}
      onChange={onChange}
      selectedValue={value}
      options={options}
    />
  );
};
const myComponents = {
  RadioGroup
}
// ... and then elsewhere
<FormiumForm components={myComponents} />

As previously mentioned, if you don't want to use RadioGroup, you can specify a custom Radio and Formium will take care of grouping the correct series of children on your behalf.

const Radio = ({ label, ...props }) => {
  return (
    <label>
      <input type="radio" {...props} />
      {label}
    </label>
  );
};
const components = {
  Radio
}
// ... and then elsewhere
<FormiumForm components={components} />

Radio supports the full range of HTML <input> props. The most common options are detailed below.