RadioCard

Library

UDS Base

Repository

github.com/telus/universal-design-system

Package

npmjs.com/package/@telus-uds/components-base

Package version

1.6.1

Loading...

<RadioCard title="Radio card"> <Typography>Additional info.</Typography> <Typography>More additional info.</Typography> </RadioCard>

<RadioCard title="Radio card">
  <Typography>Additional info.</Typography>
  <Typography>More additional info.</Typography>
</RadioCard>

Introduction

import { RadioCard } from '@telus-uds/components-base'

A RadioCard is a Card that, when part of a RadioCardGroup, may be selected like a radio button.

Guidance

caution

In most cases, RadioCardGroup should be used instead of using RadioCard directly.

Pass the RadioCardGroup an items array and it will render RadioCards for each item in the array with appropriate accessibility props, web form tags and state management.

Use RadioCard where a user needs to make one selection out of a selection, and where each option requires some detailed information.

Accessibility

RadioCard component accepts all the common accessibility props, but also sets some defaults, including accessibility role 'radio' and accessibility state that depends on the other props (checked, inactive) or the internal state in case of uncontrolled RadioCard.

Props

Name	Type	Default	Description
title	string		Content to be displayed at the top of the card alongside the radio button
children	union		Additional content to be displayed below the button.
checked	bool		Use `checked` for controlled Radio. For uncontrolled Radio, use the `defaultChecked` prop.
defaultChecked	bool		Use `defaultChecked` to provide the initial value for an uncontrolled Radio.
description	string		An optional radio button description.
id	string		Radio card button ID.
inactive	bool		Whether the corresponding input is disabled or active.
label	string		The label.
name	string		Associate this radio card with a group (set as the name attribute).
error	bool		Whether the underlying input triggered a validation error or not.
value	union		The value. Must be unique within the group.
onChange	func		Callback called when a controlled radio card gets interacted with.
tokens	custom		System tokens prop, see tokens for more details
variant	objectOf		System variant prop, see variants for more details