@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 provided by parent Group component| |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|[ constants.size.SMALL, constants.size.MEDIUM, constants.size.LARGE]|false|constants.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