## Examples

### Basic


import Example1 from './Example1.html?raw'

<LiveExample html={Example1} />

### Checked


import Example2 from './Example2.html?raw'

<LiveExample html={Example2} />

### Label wrapping input


import Example3 from './Example3.html?raw'

<LiveExample html={Example3} />

### Reversed


import Example4 from './Example4.html?raw'

<LiveExample html={Example4} />

### Disabled


import Example5 from './Example5.html?raw'

<LiveExample html={Example5} />

### With description


import Example6 from './Example6.html?raw'

<LiveExample html={Example6} />

### With body


import Example7 from './Example7.html?raw'

<LiveExample html={Example7} />

### With description and body


import Example8 from './Example8.html?raw'

<LiveExample html={Example8} />

### Standalone input


import Example9 from './Example9.html?raw'

<LiveExample html={Example9} />

## 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** |