Radio

Library

UDS Base

Repository

github.com/telus/universal-design-system

Package

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

Package version

1.6.1

Loading...

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

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

Introduction

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

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.

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
error	bool	false	Whether the underlying input triggered a validation error or not.
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 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).
value	union		The value. Must be unique within the group.
onChange	func		Callback called when a controlled radio button gets interacted with.
tokens	custom		System tokens prop, see tokens for more details
variant	objectOf		System variant prop, see variants for more details