- React
- HTML

## Examples

### Basic

### Checked

### Label wrapping input

### Reversed

### Disabled

### With description

### With body

### With description and body

### Standalone input

## Documentation

### Overview

The Radio component is provided for use cases outside of forms. If it is used without label text ensure some sort of label for assistive technologies. (for example: `aria-label`)

If you extend this component or modify the styles of this component, then make sure any hover styles defined are applied to the clickable elements, like `<input>` or `<label>` since hover styles are used to convey the clickable target area of an element. To maximize the target area, use the example html where the `<label>` is the wrapping element.

### Accessibility

Attribute | Applied to | Outcome
--- | --- | ---
`disabled` | `<input type="radio">` | Indicates that the element is unavailable and removes it from keyboard focus. Required when input is disabled
`aria-describedby` | `.pf-v6-c-radio__input` | When using `.pf-v6-c-radio__description` make use of this on the input.

### Usage

Class | Applied to | Outcome
--- | --- | ---
`.pf-v6-c-radio` | `<div>`, `<label>` | Initiates the radio component. Required
`.pf-v6-c-radio__input` | `<input type="radio">` | Initiates a radio input. Required
`.pf-v6-c-radio__label` | `<label>`, `<span>` | Initiates a label. Required
`.pf-v6-c-radio__description` | `<span>` | Initiates a radio description.
`.pf-v6-c-radio__body` | `<span>` | Initiates a radio body.
`.pf-m-standalone` | `.pf-v6-c-radio` | Modifies the radio component for use with a standalone `<input type="radio">`. Required when there is no label
`.pf-m-disabled` | `.pf-v6-c-radio__label` | Modifies the radio component for the disabled state. Required when input is disabled

##
CSS variables