RadioCard

Library

UDS Base

Repository

github.com/telus/universal-design-system

Package

npmjs.com/package/@telus-uds/ds-allium

Package version

1.14.0

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/ds-allium'

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.

Platform considerations

The component is available on both native platforms and web.

Props

Name	Type	Default	Description
checked	bool		Use 'checked' for controlled Radio. For uncontrolled Radio, use the 'defaultChecked' prop.
children	node | func		Additional content to be displayed below the button.
defaultChecked	bool		Use 'defaultChecked' to provide the initial value for an uncontrolled Radio.
description	string		An optional radio button description.
error	bool		Whether the underlying input triggered a validation error or not.
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).
onChange	func		Callback called when a controlled radio card gets interacted with.
title	string		Content to be displayed at the top of the card alongside the radio button
tokens	custom		System tokens prop, see tokens for more details
value	string | number | bool		The value. Must be unique within the group.
variant	objectOf		System variant prop, see variants for more details

Tokens

In exceptional circumstances, the following tokens can be passed to this component to override its default styles. Do not do this unless absolutely necessary. Read more about overriding styles.

View Tokens

Prop Name	Token Property	Token Type
tokens	outerBorderColor	color
	outerBorderWidth	border
	outerBorderGap	size
	flex	integer
	backgroundColor	color
	borderColor	color
	borderRadius	radius
	borderWidth	border
	paddingBottom	size
	paddingLeft	size
	paddingRight	size
	paddingTop	size
	minWidth	size
	shadow	shadow
	radioCheckedBackgroundColor	color
	radioCheckedSize	size
	radioInputBackgroundColor	color
	radioInputBorderColor	color
	radioInputBorderWidth	border
	radioInputOutlineColor	color
	radioInputOutlineWidth	border
	radioInputSize	size
	radioOuterBorderColor	color
	radioOuterBorderWidth	border
	radioOuterBorderGap	size
	fontSize	fontSize
	fontName	fontName
	lineHeight	lineHeight
	color	color
	letterSpacing	letterSpacing
	textTransform	textTransform
	fontWeight	fontWeight
	radioSpace	integer
	contentSpace	integer

Figma

Variants

This component does not have any stylistic variants.

Feedback

• Spotted a problem with this component? Raise an issue on GitHub
• See any existing issues for this component
• Contact the team on slack in #ds-allium-support