| Name | Description | Default | Type |
|---|---|---|---|
checked | Sets checked prop via onChange when using as controlled component. | | boolean |
defaultChecked | Initialize checked prop when using as uncontrolled component. | | boolean |
disabled | Disable the control. The browser defaults to false. | | boolean |
id | Sets DOM id for the control and associates label element via 'for' attribute. If an id is not pass, a random id will be generated for any render. | | string |
indeterminate | Sets Radio Button to an an indeterminate state. | false | boolean |
label | Pass a string or a fragment with an Icon and string. | | ReactNode |
name | Sets html name attribute for the underlying control. Useful for mapping to a data field. | | string |
onChange | | (e: ChangeEvent<HTMLInputElement>) => void | |
required | Indicate if the field is required. The browser defaults to false. | | boolean |
status | Set visual state based on a validation state. | | 'error' |'pending' |'success' |'warning' |
RadioButton
core package3.2.2
Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.
RadioButtons allow users to select one option from a collective set.
Usage
RadioButtons should be used when there are less than 7 options to choose from. If you require more than 7 options, consider using a Select Field instead. The RadioButton component allows for standard Form Field structures such as being set required, disabled, or readOnly, as well as including a label, status, or info.
If there is a label and the Field is not disabled, passing an object to the additionalInfo prop that includes a heading and content will provide the user with more useful information on the Field when they click on the associated information Icon.
Use a single RadioButton for binary selections, such as a yes or no. A user may only select a RadioButton once. Do not use the RadioButton when a user MUST make a passive decision, such as an affirmation (use Checkbox) or if you are expecting the changes to apply instantly (use a Switch).
Example
RadioButtonGroup
The most common usage of a RadioButton is within a RadioButtonGroup. If there are multiple options to select, wrap the RadioButtons in a RadioButtonGroup so that all the options will belong to the same Form value.
Example
RadioButton cards
A RadioButton can be set to render as a Card which can be ideal to display large volumes of content within a single wrapper. You can set variant to card on either a RadioButton or a RadioButtonGroup.
RadioButton
Example
RadioButtonGroup
Example
Related components
Properties
Custom theming
You can override the styles of the RadioButton component by setting a custom theme on the Configuration component.
Example
Theme properties
{
'border-radius':'50%'}}}