Radio
A radio input allows users to select only one option from a number of choices. Radio is generally displayed in a radio group.Neutral selected states
When the platform-dst-tokens-finesse feature flag is enabled, this component uses the new neutral treatment for selected states.
The goal of @atlaskit/radio is to take @atlaskit/field-radio-group and refactor it to:
normalize the API using conventions that have developed within ADG3 and the React ecosystem
refactor out the Stateless/Stateful paradigm in favor of a more maintainable, conditionally controlled component
export more granular components to enable the consumption of atlaskit radio components for more use case
s
Exports
Previously in @atlaskit/field-radio-group the following components were exported:
AkRadioGroup(default)AkRadioGroupStatelessAkRadio
@atlaskit/radio no longer has a default export. Furthermore, the following components are exported
instead:
RadioGroupRadio
Radio group
While @atlaskit/field-radio-group exported a stateful and stateless version of the RadioGroup
component, @atlaskit/radio has opted to unify these two components into a single conditionally
controlled component.
In @atlaskit/field-radio-group, users would pass in an items array to be rendered as a set of
Radio components. The shape of this items array is more or less the same in @atlaskit/radio,
however the prop has now been renamed options to be more semantically consistent with other
components of similar concern.
Other core changes are the following prop additions:
value: This is an optional prop that is compared against the value of each passed in option. The matching option will be instantiated as aRadiocomponent withisCheckedset totrue. If this prop is left undefined, the selection of any given radio is managed internally within the state of theRadioGroupcomponent.defaultValue: This is an optional prop that is set as the value in state initially. Further interactions with radio options rendered by thisRadioGroupwill override this value with the internally managed checked state.onRadioChangein@atlaskit/field-radio-groupis nowonChangein@atlaskit/radio.
Additionally, while defaultChecked use to be a valid property within the passed in items array in
field-radio-group; this is no longer the case in @atlaskit/radio, as the responsibility of this
property is now passed up to the defaultValue prop on the RadioGroup component.
Radio
The isChecked prop in field-radio-group has been replaced with the isChecked prop
in@atlaskit/radio, to inline it with conventions established both in native radio elements and
within the context of React.
value used to accept a string in field-radio-base; this has now been expanded to accept both
number and string values.