All Downloads are FREE. Search and download functionalities are using the official Maven repository.

package.docs.components.Radio.examples.Radio.md Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of patternfly Show documentation

Assets, source, tooling, and content for PatternFly 4

The newest version!

---
id: Radio
section: components
subsection: forms
cssPrefix: pf-v6-c-radio
---## Examples

### Basic

```html

  
  Basic radio


```

### Checked

```html

  
  Radio checked


```

### Label wrapping input

```html

  
  Radio label wraps input


```

### Reversed

```html

  Radio reversed
  


```

### Disabled

```html

  
  Radio disabled


  
  Radio disabled checked


```

### With description

```html

  
  Radio 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 od GCP.


```

### With body

```html

  
  Radio with body
  This is where custom content goes.


```

### With description and body

```html

  
  Radio 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 od GCP.
  This is where custom content goes.


```

### Standalone input

```html

  


```

## 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 `` or `` 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 `` is the wrapping element.

### Accessibility

| Attribute | Applied to | Outcome |
| -- | -- | -- |
| `disabled` | `` | 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` | ``, `` |  Initiates the radio component. **Required**  |
| `.pf-v6-c-radio__input` | `` |  Initiates a radio input. **Required**  |
| `.pf-v6-c-radio__label` | ``, `` |  Initiates a label. **Required**  |
| `.pf-v6-c-radio__description` | `` | Initiates a radio description. |
| `.pf-v6-c-radio__body` | `` | Initiates a radio body. |
| `.pf-m-standalone` | `.pf-v6-c-radio` |  Modifies the radio component for use with a standalone ``. **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** |