@paprika/radio

@paprika/radio

Description

Radio component displays a radio input and label text beside it. When clicked it selects the input and deselects any other radio input in its group

Installation

yarn add @paprika/radio

or with npm:

npm install @paprika/radio

Props

Radio

Prop	Type	required	default	Description
a11yText	string	false	null	Used for aria-label on the radio input
canDeselect	bool	false	false	Describe if the radio started as selected or not
children	node	false	null	Used for label contents
isChecked	bool	false	false
isDisabled	bool	false	false	Describe if the radio is disabled or not
defaultIsChecked	bool	false	false	Describe if the radio started as checked or not
name	string	false	""	Name provided for accessibility
onClick	custom	false	() => {}	onClick provided by parent Group component
size	[ Radio.types.size.SMALL, Radio.types.size.MEDIUM, Radio.types.size.LARGE]	false	Radio.types.size.MEDIUM	Size of the labels provided by parent Group component. Size SMALL is depreciated in the design guideline therefore, please use MEDIUM instead.
tabIndex	[number,string]	false	0	Value for tabindex attribute to override the default of 0.
value	string	false	""	Value applied to the input if needed.

Radio.Group

Prop	Type	required	default	Description
canDeselect	bool	false	false	Can deselect any radio
children	node	false	null	The individual radio items.
isDisabled	bool	false	false	Are all radios disabled
onChange	func	true	-	On change of radio selection.
size	[ Radio.types.size.SMALL, Radio.types.size.MEDIUM, Radio.types.size.LARGE]	false	Radio.types.size.MEDIUM	The size for all radio components.

Usage

import Radio from "@paprika/radio";

<Radio.Group
  onChange={activeIndex => {
    // get values from the data using index
  }}
>
  <Radio>Radio 1</Radio>
  <Radio>Radio 2</Radio>
  <Radio>Radio 3</Radio>
  <Radio>Radio 4</Radio>
</Radio.Group>;

Links

• Storybook Showcase
• GitHub source code
• Create GitHub issue
• CHANGELOG