@berlitz/radio-card

RadioCard component for the Max Design System

Usage no npm install needed!

<script type="module">
  import berlitzRadioCard from 'https://cdn.skypack.dev/@berlitz/radio-card';
</script>

README

RadioCard npm version

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