@paprika/radio
v1.0.29
Published
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
Downloads
4,135
Keywords
Readme
@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/radioor with npm:
npm install @paprika/radioProps
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 | [ 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>;