Examples
Label wraps
You can expand the clickable area of a radio so that it spans wider than the radio label by adding the isLabelWrapped property. This allows users to select a radio by clicking the radio itself, the label, or the area between the radio and the label.
With description
Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP.
With description and body
Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP.This is where custom content goes.
Props
Radio
| Name | Type | Default | Description |
|---|---|---|---|
| idrequired | string | Id of the radio. | |
| namerequired | string | Name for group of radios | |
| aria-label | string | Aria label for the radio. | |
| body | React.ReactNode | Body of the radio. | |
| checked | boolean | Flag to show if the radio is checked. | |
| className | string | '' | Additional classes added to the radio wrapper. This wrapper will be div element by default. It will be a label element if isLabelWrapped is true, or it can be overridden by any element specified in the component prop. |
| component | React.ElementType | Sets the radio wrapper component to render. Defaults to "div". If set to "label", behaves the same as if isLabelWrapped prop was specified. | |
| description | React.ReactNode | Description text of the radio. | |
| inputClassName | string | Additional classes added to the radio input. | |
| isChecked | boolean | Flag to show if the radio is checked. | |
| isDisabled | boolean | false | Flag to show if the radio is disabled. |
| isLabelBeforeButton | boolean | Flag to show if the radio label is shown before the radio input. | |
| isLabelWrapped | boolean | Flag to indicate whether the radio wrapper element is a native label element for the radio input. Will not apply if a component prop (with a value other than a "label") is specified. | |
| isValid | boolean | true | Flag to show if the radio selection is valid or invalid. |
| label | React.ReactNode | Label text of the radio. | |
| onChange | (event: React.FormEvent<HTMLInputElement>, checked: boolean) => void | () => {} | A callback for when the radio selection changes. |
| ouiaId | number | string | Value to overwrite the randomly generated data-ouia-component-id. | |
| ouiaSafe | boolean | Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-radio | --pf-v5-c-radio--GridGap | 0.25rem 0.5rem | ||
--pf-v5-c-radio--GridGap --pf-v5-global--spacer--xs --pf-v5-global--spacer--sm $pf-v5-global--spacer--xs $pf-v5-global--spacer--sm pf-size-prem(4px) pf-size-prem(8px) 0.25rem 0.5rem | ||||
| .pf-v5-c-radio | --pf-v5-c-radio__label--disabled--Color | #6a6e73 | ||
--pf-v5-c-radio__label--disabled--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-radio | --pf-v5-c-radio__label--Color | #151515 | ||
--pf-v5-c-radio__label--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-radio | --pf-v5-c-radio__label--FontWeight | 400 | ||
--pf-v5-c-radio__label--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400 | ||||
| .pf-v5-c-radio | --pf-v5-c-radio__label--FontSize | 1rem | ||
--pf-v5-c-radio__label--FontSize --pf-v5-global--FontSize--md $pf-v5-global--FontSize--md pf-font-prem(16px) 1rem | ||||
| .pf-v5-c-radio | --pf-v5-c-radio__label--LineHeight | 1.5 | ||
--pf-v5-c-radio__label--LineHeight --pf-v5-global--LineHeight--md $pf-v5-global--LineHeight--md 1.5 | ||||
| .pf-v5-c-radio | --pf-v5-c-radio__input--TranslateY | calc((1.5 * 1rem / 2 ) - 50%) | ||
--pf-v5-c-radio__input--TranslateY calc((--pf-v5-c-radio__label--LineHeight * --pf-v5-c-radio__label--FontSize / 2 ) - 50%) calc((--pf-v5-global--LineHeight--md * --pf-v5-global--FontSize--md / 2 ) - 50%) calc(($pf-v5-global--LineHeight--md * $pf-v5-global--FontSize--md / 2 ) - 50%) calc((1.5 * pf-font-prem(16px) / 2 ) - 50%) calc((1.5 * 1rem / 2 ) - 50%) | ||||
| .pf-v5-c-radio | --pf-v5-c-radio__input--TranslateY--moz | calc((1.5 * 1rem / 2 ) - 50%) | ||
--pf-v5-c-radio__input--TranslateY--moz --pf-v5-c-radio__input--TranslateY calc((--pf-v5-c-radio__label--LineHeight * --pf-v5-c-radio__label--FontSize / 2 ) - 50%) calc((--pf-v5-global--LineHeight--md * --pf-v5-global--FontSize--md / 2 ) - 50%) calc(($pf-v5-global--LineHeight--md * $pf-v5-global--FontSize--md / 2 ) - 50%) calc((1.5 * pf-font-prem(16px) / 2 ) - 50%) calc((1.5 * 1rem / 2 ) - 50%) | ||||
| .pf-v5-c-radio | --pf-v5-c-radio__input--first-child--MarginLeft | 0.0625rem | ||
| .pf-v5-c-radio | --pf-v5-c-radio__input--last-child--MarginRight | 0.0625rem | ||
| .pf-v5-c-radio | --pf-v5-c-radio__description--FontSize | 0.875rem | ||
--pf-v5-c-radio__description--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
| .pf-v5-c-radio | --pf-v5-c-radio__description--Color | #6a6e73 | ||
--pf-v5-c-radio__description--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-radio | --pf-v5-c-radio__body--MarginTop | 0.5rem | ||
--pf-v5-c-radio__body--MarginTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-radio.pf-m-standalone | --pf-v5-c-radio--GridGap | 0 | ||
| .pf-v5-c-radio.pf-m-standalone | --pf-v5-c-radio__input--TranslateY | none | ||
| .pf-v5-c-radio__label:disabled | --pf-v5-c-radio__label--Color | #6a6e73 | ||
--pf-v5-c-radio__label--Color --pf-v5-c-radio__label--disabled--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
View source on GitHub
