Radio

Introduction

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

Included Components

1. Radio: A single selectable component
2. RadioGroup: A group of selectable radio components<

Examples

Meal ChoiceSoupSaladSandwich
Edit code

Usage

Typically, radio buttons are used in a group to choose one option from several, similar to how a <select> tag contains several <option> tags. As such, you can use the RadioGroup component with a series of Radio children. RadioGroup is responsible for managing state and interaction.

1import React from "react";
2import { RadioGroup } from "@commure/components-foundation";
3
4function MyRadioGroup() {
5  return (
6    <RadioGroup label="Meal Choice" onChange={() => {}} selectedValue="two">
7      <Radio value="one" label="Soup" />
8      <Radio value="two" label="Salad" />
9      <Radio value="three" label="Sandwich" />
10    </RadioGroup>
11  );
12}
13
14export default MyRadioGroup;

API Reference

Radio

Prop Name	Required?	Type	Description
alignIndicator	false	Alignment	Alignment of the indicator within container.
checked	false	boolean	Whether the control is checked.
children	false	React.ReactNode	JSX label for the control.
className	false	string	A space-delimited list of class names to pass along to a child element.
defaultChecked	false	boolean	Whether the control is initially checked (uncontrolled mode).
disabled	false	boolean	Whether the control is non-interactive.
inline	false	boolean	Whether the control should appear as an inline element.
inputRef	false	(ref: HTMLInputElement | null) => any	Ref handler that receives HTML `<input>` element backing this component.
label	false	string	Text label for the control. Use `children` or `labelElement` to supply JSX content. This prop actually supports JSX elements, but TypeScript will throw an error because `HTMLAttributes` only allows strings.
labelElement	false	React.ReactNode	JSX Element label for the control. This prop is a workaround for TypeScript consumers as the type definition for `label` only accepts strings. JavaScript consumers can provide a JSX element directly to `label`.
large	false	boolean	Whether this control should use large styles.
onChange	false	React.FormEventHandler<HTMLInputElement>	Event handler invoked when input value is changed.
tagName	false	keyof IntrinsicElements	Name of the HTML tag that wraps the checkbox. By default a `<label>` is used, which effectively enlarges the click target to include all of its children. Supply a different tag name if this behavior is undesirable or you're listening to click events from a parent element (as the label can register duplicate clicks).

RadioGroup

Prop Name	Required?	Type	Description
className	false	string	A space-delimited list of class names to pass along to a child element.
disabled	false	boolean	Whether the group and _all_ its radios are disabled. Individual radios can be disabled using their `disabled` prop.
inline	false	boolean	Whether the radio buttons are to be displayed inline horizontally.
label	false	string	Optional label text to display above the radio buttons.
name	false	string	Name of the group, used to link radio buttons together in HTML. If omitted, a unique name will be generated internally.
onChange	true	(event: FormEvent<HTMLInputElement>) => void	Callback invoked when the currently selected radio changes. Use `event.currentTarget.value` to read the currently selected value. This prop is required because this component only supports controlled usage.
options	false	IOptionProps[]	Array of options to render in the group. This prop is mutually exclusive with `children`: either provide an array of `IOptionProps` objects or provide `<Radio>` children elements.
selectedValue	false	string | number	Value of the selected radio. The child with this value will be `:checked`.

Related Reading

Blueprint Reference