Radio

Library

UDS Base

Repository

github.com/telus/universal-design-system

Package

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

Package version

1.14.0

Loading...

<Radio label="This is a radio button" />

<Radio label="This is a radio button" />

Introduction

import { Radio } from '@telus-uds/ds-allium'

Radio component represents a radio button, either isolated or within a form.

Guidance

caution

In most cases, RadioGroup should be used instead of using Radio directly.

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

Controlled version

If the radio button is controlled from outside, it needs to receive checked and onChange props.

Uncontrolled version

In case of uncontrolled radio button you can use defaultChecked prop to provide the initial value. Whenever the radio button gets toggled, it calls the onChange callback with the new value (boolean).

Using within forms

You can pass name and value props if you need a particular radio button to be a part of a radio group on a form.

Validation

You can mark a radio button as failing validation by setting the error prop to true.

Accessibility

Radio 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 radio button.

Platform considerations

The component is available on both native platforms and web.

Props

• Use label prop to provide a label for the radio button. For a disabled Radio set the inactive prop to true.

Name	Type	Default	Description
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.
error	bool	false	Whether the underlying input triggered a validation error or not.
id	string		Radio button ID.
inactive	bool		Whether the corresponding input is disabled or active.
label	string		The label.
name	string		Associate this radio button with a group (set as the name attribute).
onChange	func		Callback called when a controlled radio button gets interacted with.
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	checkedBackgroundColor	color
	checkedSize	size
	containerBackgroundColor	color
	containerBorderRadius	radius
	containerOpacity	opacity
	containerPaddingBottom	size
	containerPaddingLeft	size
	containerPaddingRight	size
	containerPaddingTop	size
	containerShadow	shadow
	descriptionFontSize	fontSize
	descriptionLineHeight	lineHeight
	descriptionMarginLeft	size
	inputBackgroundColor	color
	inputBorderColor	color
	inputBorderWidth	border
	inputOutlineColor	color
	inputOutlineWidth	border
	inputSize	size
	outerBorderGap	size
	outerBorderWidth	border
	outerBorderColor	color
	labelColor	color
	labelFontName	fontName
	labelFontSize	fontSize
	labelFontWeight	fontWeight
	labelLineHeight	lineHeight
	labelMarginLeft	size

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