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
Radio
: A single selectable componentRadioGroup
: 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.
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