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

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.

import React from "react";
import { RadioGroup } from "@commure/components-foundation";
function MyRadioGroup() {
return (
<RadioGroup
label="Meal Choice"
onChange={() => {}}
selectedValue="two"
>
<Radio value="one" label="Soup" />
<Radio value="two" label="Salad" />
<Radio value="three" label="Sandwich" />
</RadioGroup>
);
}
export default MyRadioGroup;

API Reference

Radio

Prop NameRequired?TypeDescription
alignIndicatorfalseAlignmentAlignment of the indicator within container.
checkedfalsebooleanWhether the control is checked.
childrenfalseReact.ReactNodeJSX label for the control.
classNamefalsestringA space-delimited list of class names to pass along to a child element.
defaultCheckedfalsebooleanWhether the control is initially checked (uncontrolled mode).
disabledfalsebooleanWhether the control is non-interactive.
inlinefalsebooleanWhether the control should appear as an inline element.
inputReffalse(ref: HTMLInputElement | null) => anyRef handler that receives HTML `<input>` element backing this component.
labelfalsestringText 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.
labelElementfalseReact.ReactNodeJSX 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`.
largefalsebooleanWhether this control should use large styles.
onChangefalseReact.FormEventHandler<HTMLInputElement>Event handler invoked when input value is changed.
tagNamefalsekeyof IntrinsicElementsName 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 NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to a child element.
disabledfalsebooleanWhether the group and _all_ its radios are disabled. Individual radios can be disabled using their `disabled` prop.
inlinefalsebooleanWhether the radio buttons are to be displayed inline horizontally.
labelfalsestringOptional label text to display above the radio buttons.
namefalsestringName of the group, used to link radio buttons together in HTML. If omitted, a unique name will be generated internally.
onChangetrue(event: FormEvent<HTMLInputElement>) => voidCallback 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.
optionsfalseIOptionProps[]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.
selectedValuefalsestring | numberValue of the selected radio. The child with this value will be `:checked`.

Related Reading

Blueprint Reference