Radio

Radios let users select one option at a time.

Overview

Radio LabelRadio LabelRadio LabelThe Radio Component.

Usage

The Radio component allows the active selection of one input at a time. It typically appears in forms and modals. If you require the user to select multiple options, then the Checkbox component should be used instead.

Anatomy

Radio LabelRadio ButtonLabel12The Radio Anatomy.
  1. Radio Button. The Radio Button is a single value toggle
  2. Label (Optional). Used to provide context to the Radio Button.

States

DefaultHover/ActiveCheckedThe Radio States.

The Radio Button has three available states - Default, Hover/Active, and Checked.

The Radio component allows the active selection of one input at a time. The initial release for this component has been written to work with Formik though a Redux Forms variation will follow.

The Radio component can be used on its own in a regular form, if you use the correct syntax, or used within a Formik form as the render component for a Field.

Example with Formik

<Radio name="example" value="" label="My Label 1" />

Properties

The Radio component accepts the standard field properties as defined by Formik. It is also responsible for rendering an optional field label, including any information or error messages associated with the field.

FieldProps
NameTypeRequiredDefaultDescription
namestringFalsen/aThe field name
valuestringFalsen/aThe field current value
onChange(React.SyntheticEvent):voidTruen/aCalled when the field value changes
onBlur(React.SyntheticEvent):voidTruen/aCalled when the field loses focus

FormProps
NameTypeRequiredDefaultDescription
errors{ string: string }False{}A hashmap using the field name as a key and the error message associated with it
touched{ string: boolean }False{}A hashmap using the field name as a key and indicating if it has been touched or not

Radio
NameTypeRequiredDefaultDescription
classNamestringFalsen/aOptional additional css class to associate with the component wrapper
isDisabledbooleanFalsefalseMark the field as disabled/inactive
fieldFieldPropsTruen/aCan be manually provided or sent from Formik. Indicates any errors and which fields have been touched
idstringFalseunique idProvide the ID for a field and tie it to its label. If one is not provided then a unique id will be created
labelstringFalsen/aIdeally a field should include a label to help the user understand what the field is for and help screen readers