Radio
Radio buttons are used to present the user with mutually exclusive choices. Radio buttons must always be presented in a group of two or more. Related design guidelines: Data input
ExamplesPropsCSS VariablesProps
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | '' | Additional classes added to the radio. |
| id | string | Yes | Id of the radio. | |
| isLabelWrapped | boolean | No | Flag to show if the radio label is wrapped on small screen. | |
| isLabelBeforeButton | boolean | No | Flag to show if the radio label is shown before the radio button. | |
| checked | boolean | No | Flag to show if the radio is checked. | |
| isChecked | boolean | No | Flag to show if the radio is checked. | |
| isDisabled | boolean | No | false | Flag to show if the radio is disabled. |
| isValid | boolean | No | true | Flag to show if the radio selection is valid or invalid. |
| label | React.ReactNode | No | Label text of the radio. | |
| name | string | Yes | Name for group of radios | |
| onChange | (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void | No | () => {} | A callback for when the radio selection changes. |
| aria-label | string | No | Aria label for the radio. | |
| description | React.ReactNode | No | Description text of the radio. |
CSS Variables
| .pf-c-radio | --pf-c-radio--GridGap | 0.25rem 0.5rem | ||
| .pf-c-radio | --pf-c-radio__label--disabled--Color | #6a6e73 | ||
| .pf-c-radio | --pf-c-radio__label--Color | #151515 | ||
| .pf-c-radio | --pf-c-radio__label--FontWeight | 400 | ||
| .pf-c-radio | --pf-c-radio__label--FontSize | 1rem | ||
| .pf-c-radio | --pf-c-radio__label--LineHeight | 1.3 | ||
| .pf-c-radio | --pf-c-radio__input--MarginTop | -0.1875rem | ||
| .pf-c-radio | --pf-c-radio__input--first-child--MarginLeft | 0.0625rem | ||
| .pf-c-radio | --pf-c-radio__input--last-child--MarginRight | 0.0625rem | ||
| .pf-c-radio | --pf-c-radio__description--FontSize | 0.875rem | ||
| .pf-c-radio | --pf-c-radio__description--Color | #6a6e73 | ||
| .pf-c-radio__label:disabled | --pf-c-radio__label--Color | #6a6e73 | ||
