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
<qtm-radio-button name="size" size="small" checked>Small</qtm-radio-button>
<qtm-radio-button name="size" size="medium">Medium</qtm-radio-button>
<qtm-radio-button name="size" size="large">Large</qtm-radio-button>
Selection
Radios can be checked by adding checked attribute.
Small
Medium
Large
<qtm-radio-button size="small" checked>Small</qtm-radio-button>
<qtm-radio-button size="medium" checked>Medium</qtm-radio-button>
<qtm-radio-button size="large" checked>Large</qtm-radio-button>
Colors
Radios are available in two colors: primary and neutral. The default color is the primary color.
Primary Checked
Neutral Checked
Neutral Unchecked
<qtm-radio-button name="primary" color="primary" checked>Primary Checked</qtm-radio-button>
<qtm-radio-button name="neutral" color="neutral" checked>Primary Checked</qtm-radio-button>
...
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
<qtm-radio-button name="primary-error" checked error
>Primary Checked</qtm-radio-button
>
...
Disabled
Radios can also have a disabled state.
Primary Checked
Primary Unchecked
Neutral Checked
Neutral Unchecked
<qtm-radio-button name="primary-disabled" checked disabled>Primary Checked</qtm-radio-button>
...
Value
You can set value for a radio button by using value attribute.
<qtm-radio-button value="small">Small</qtm-radio-button>
Name
You can set name for a radio button by using name attribute.
<qtm-radio-button name="Radio-Button">Radio Button</qtm-radio-button>
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.
<qtm-radio-button label="Radio Button" checked></qtm-radio-button>
Required
If a radio button has the attribute required, it has to be checked.
<qtm-radio-button required>Radio Button</qtm-radio-button>
Input Id
The id of the radio element
<qtm-radio-button input-id="radio-button">Radio Button</qtm-radio-button>
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.
This is some placeholder help text.
<qtm-radio-button checked>
<div>
<qtm-typography>Option 1</qtm-typography>
<qtm-typography component="caption-1" classes="text-bluegrey-500">
This is some placeholder help text.
</qtm-typography>
</div>
</qtm-radio-button>
Radio Group
qtm-radio-group is a helpful wrapper used to group radio elements. Make sure that qtm-radio-group component has a name attribute.
<qtm-radio-group name="radioGroup1">
<qtm-radio-button checked>Radio 1</qtm-radio-button>
<qtm-radio-button>Radio 2</qtm-radio-button>
<qtm-radio-button>Radio 3</qtm-radio-button>
</qtm-radio-group>
Sizes
qtm-radio-group 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.
<qtm-radio-group size="small" name="radioGroupSizeSmall">
<qtm-radio-button checked>Radio 1</qtm-radio-button>
<qtm-radio-button>Radio 2</qtm-radio-button>
<qtm-radio-button>Radio 3</qtm-radio-button>
</qtm-radio-group>
...
Value
You can set a default value for a radio button group by using default-value attribute. And you can also control value of this group by using value attribute
<qtm-radio-group default-value="radio1" name="radioGroup">
<qtm-radio-button value="radio1">Radio 1</qtm-radio-button>
<qtm-radio-button value="radio2">Radio 2</qtm-radio-button>
<qtm-radio-button value="radio3">Radio 3</qtm-radio-button>
</qtm-radio-group>
API
qtm-radio-button
| 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 |
|---|---|---|
| clicked | CustomEvent<RadioButtonEvent> | Callback fired when the radio is clicked. You can pull out the state radio by accessing event.target.checked / event.target.indeterminate |
qtm-radio-group
| 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 |
|---|---|---|
| valueChanged | CustomEvent<RadioButtonEvent> | Callback fired when a radio button is selected. |