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. |
| 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. | |
| labelPosition | 'start' | 'end' | Sets the position of the label. Defaults to 'end' (after the radio input). | |
| 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-v6-c-radio | --pf-v6-c-radio--GridGap | 0.5rem 0.5rem | ||
| ||||
| .pf-v6-c-radio | --pf-v6-c-radio--AccentColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-radio | --pf-v6-c-radio--m-standalone--MinHeight | calc(0.875rem * 1.5) | ||
| ||||
| .pf-v6-c-radio | --pf-v6-c-radio__label--disabled--Color | (In light theme) #a3a3a3 | ||
| ||||
| .pf-v6-c-radio | --pf-v6-c-radio__label--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-radio | --pf-v6-c-radio__label--FontWeight | 400 | ||
| ||||
| .pf-v6-c-radio | --pf-v6-c-radio__label--FontSize | 0.875rem | ||
| ||||
| .pf-v6-c-radio | --pf-v6-c-radio__label--LineHeight | 1.5 | ||
| ||||
| .pf-v6-c-radio | --pf-v6-c-radio__description--FontSize | 0.75rem | ||
| ||||
| .pf-v6-c-radio | --pf-v6-c-radio__description--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-radio | --pf-v6-c-radio__input--first-child--MarginInlineStart | 0.0625rem | ||
| .pf-v6-c-radio | --pf-v6-c-radio__input--last-child--MarginInlineEnd | 0.0625rem | ||
| .pf-v6-c-radio | --pf-v6-c-radio__body--MarginBlockStart | 0.5rem | ||
| ||||
| .pf-v6-c-radio | --pf-v6-c-radio__input--TranslateY | calc((1.5 * 0.875rem / 2 ) - 50%) | ||
| ||||
| .pf-v6-c-radio__label:disabled | --pf-v6-c-radio__label--Color | (In light theme) #a3a3a3 | ||
| ||||