RadioGroup and Radio

The RadioGroup and Radio components implements an <input type="radio"/> replacement. Together, they present a UI for picking one specific choice out of a set of options.

Examples

This is just an example Radio component, designed in the Plain Kit project. You have total freedom to design Plume components exactly as you'd want them to be, with your own unique variants and behaviors.

Switch to a different kit:

Plain Kit

Basic RadioGroup

Horizontal orientation

RadioGroup Props

PropTypeDescription
labelReact.ReactNodeLabel for the RadioGroup; if not specified, then aria-label or aria-labelledby should be specified.
valuestringValue of the RadioGroup (controlled)
defaultValuestringDefault value of the RadioGroup (uncontrolled)
orientationvertical | horizontalOrientation of the RadioGroup; defaults to "vertical"
isDisabledbooleanWhether the RadioGroup is disabled
isReadOnlybooleanWhether the RadioGroup is read-only
selectAllOnFocusbooleanWhether to select all the text in the the TextField on focused
refPlumeRadioGroupRefProgrammatic access to RadioGroup

PlumeRadioGroupRef

MethodDescription
UNSAFE_getDOMNode()Returns the root DOM element

Radio Props

PropTypeDescription
childrenReact.ReactNodeLabel for the Radio
valuestringValue corresponding to this Radio option
isDisabledbooleanWhether the RadioGroup is disabled
selectAllOnFocusbooleanWhether to select all the text in the the TextField on focused
refPlumeRadioRefProgrammatic access to Radio

PlumeRadioRef

MethodDescription
focus()Focuses this radio
UNSAFE_getDOMNode()Returns the root DOM element