RadioCard

Radio-card input field

Installation

yarn add @berlitz/radio-card

Props

| Argument | Type | Required | Notes | | -------- | -------------------- | -------- | ----------------------------------------------------------- | | name | string | ✅ | Used for the name attribute on the fields | | data | array | ✅ | An arry of objects used to create radio cards | | value | string, number, bool | ❌ | Current value selected | | onChange | func | ❌ | Callback function which return the selected value on change |

Usage

yarn add @berlitz/radio-card

import RadioCard from '@berlitz/radio-card'

const data = [
  {
    id: 'value-1',
    title: `I'm the first`,
    subtitle: `First subtitle`,
  },
  {
    id: 'value-2',
    title: `I'm the second`,
    subtitle: `Second subtitle`,
    disabled: true,
  },
  {
    id: 'value-3',
    title: `I'm the third`,
    subtitle: `Third subtitle`,
    disabled: true,
  },
]

<RadioCard name='my_radio-card_field' data={data} value={selectedValue} onChange={value => setSelectedValue(value)} />

When to use this component

Any input field that requires radio button