Radio

Radio buttons are used when you have a group of mutually exclusive choices and only one selection from the group is allowed.

Sizes

Radios are available in three sizes to cater for the diverse range of use cases and devices that our business uses. By default, the medium radio is used.

Small

Medium

Large

<QtmRadioButton name="size" size="small" checked>Small</QtmRadioButton>
<QtmRadioButton name="size" size="medium">Medium</QtmRadioButton>
<QtmRadioButton name="size" size="large">Large</QtmRadioButton>

Selection

Radios can be checked by adding checked attribute.

Small

Medium

Large

<QtmRadioButton size="small" checked>Small</QtmRadioButton>
<QtmRadioButton size="medium" checked>Medium</QtmRadioButton>
<QtmRadioButton size="large" checked>Large</QtmRadioButton>

Colors

Radios are available in two colors: primary and neutral. The default color is the primary color.

Primary Checked

Primary Unchecked

Neutral Checked

Neutral Unchecked

<QtmRadioButton name="primary" color="primary" checked>Primary Checked</QtmRadioButton>
<QtmRadioButton name="neutral" color="neutral" checked>Primary Checked</QtmRadioButton>
...

Errors

Radios can also have an error state to show that a selection needs to be made in order to move forward, or that a selection that was made is invalid.

Primary Checked

Primary Unchecked

Neutral Checked

Neutral Unchecked

<QtmRadioButton name="primary-error" checked error>Primary Checked</QtmRadioButton>
...

Disabled

Radios can also have a disabled state.

Primary Checked

Primary Unchecked

Neutral Checked

Neutral Unchecked

<QtmRadioButton name="primary-disabled" checked disabled>Primary Checked</QtmRadioButton>
...

Value

You can set value for a radio button by using value attribute.

<QtmRadioButton value="small">Small</QtmRadioButton>

Name

You can set name for a radio button by using name attribute.

<QtmRadioButton name="Radio-Button">Radio Button</QtmRadioButton>

Label

You can set label for a radio button by using label attribute. When label attribute is set, the text of the button is set to the same.

<QtmRadioButton label="Radio Button" checked></QtmRadioButton>

Required

If a radio button has the attribute required, it has to be checked.

<QtmRadioButton required>Radio Button</QtmRadioButton>

InputId

The id of the radio element

<QtmRadioButton inputId="radio-button">Radio Button</QtmRadioButton>

Custom labels

Radios accepts any component as its label. Make sure to use items with clear textual labels, or elements that are self explanatory in the given context.

Option 1

This is some placeholder help text.

<QtmRadioButton checked>
  <div>
    <QtmTypography>Option 1</QtmTypography>
    <QtmTypography component="caption-1" classes="text-bluegrey-500">
      This is some placeholder help text.
    </QtmTypography>
  </div>
</QtmRadioButton>

Radio Group

QtmRadioGroup is a helpful wrapper used to group radio elements. Make sure that QtmRadioGroup component has a name attribute.

Radio 1Radio 2Radio 3

<QtmRadioGroup name="radioGroup1">
  <QtmRadioButton checked>Radio 1</QtmRadioButton>
  <QtmRadioButton>Radio 2</QtmRadioButton>
  <QtmRadioButton>Radio 3</QtmRadioButton>
</QtmRadioGroup>

Sizes

QtmRadioGroup are available in three sizes that correspond to the different bottom margin values and size of their child elements. By default, the medium size is used.

SmallRadio 1Radio 2Radio 3MediumRadio 1Radio 2Radio 3LargeRadio 1Radio 2Radio 3

<QtmRadioGroup size="small" name="radioGroupSizeSmall">
  <QtmRadioButton checked>Radio 1</QtmRadioButton>
  <QtmRadioButton>Radio 2</QtmRadioButton>
  <QtmRadioButton>Radio 3</QtmRadioButton>
</QtmRadioGroup>
...

Value

You can set a default value for a radio button group by using defaultValue attribute. And you can also control value of this group by using value attribute

Radio 1Radio 2Radio 3

<QtmRadioGroup defaultValue="radio1" name="radioGroup">
  <QtmRadioButton value="radio1">Radio 1</QtmRadioButton>
  <QtmRadioButton value="radio2">Radio 2</QtmRadioButton>
  <QtmRadioButton value="radio3">Radio 3</QtmRadioButton>
</QtmRadioGroup>

API

QtmRadioButton

Property	Type	Default	Description
checked	boolean	false	If true, the radio is checked.
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing
color	"neutral" | "primary"	'primary'	The color of the component
disabled	boolean	false	If true, the component is disabled.
error	boolean	false	If true, the component is in error state.
inputId	string		The id of the input element
label	string		Label of the component
name	string		Name attribute of the input element
required	boolean	false	if true, the input element is required
size	"large" | "medium" | "small"	'medium'	The size of the component
value	string		The value of the component

Event	Type	Description
onClicked	CustomEvent<RadioButtonEvent>	Callback fired when the radio is clicked. You can pull out the state radio by accessing event.target.checked / event.target.indeterminate

QtmRadioGroup

Property	Type	Default	Description
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing
defaultValue	string		Default selected value
name	string		This is a required attribute of the radio group element
size	"large" | "medium" | "small"	'medium'	The size of element
value	string	''	Used for setting the currently selected value

Event	Type	Description
onValueChanged	CustomEvent<RadioButtonEvent>	Callback fired when a radio button is selected.