package.docs.components.ToggleGroup.examples.toggle-group.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: Toggle group
section: components
cssPrefix: pf-v6-c-toggle-group
---## Examples

### Default

```html

  
    
  
  
    
  
  
    
  






  
    
  
  
    
  
  
    
  






  
    
  
  
    
  
  
    
  


```

### With icon

```html

  
    
  
  
    
  
  
    
  






  
    
  
  
    
  
  
    
  






  
    
  
  
    
  
  
    
  


```

### Icon-and-text

```html

  
    
  
  
    
  
  
    
  






  
    
  
  
    
  
  
    
  


```

### Compact

```html

  
    
  
  
    
  
  
    
  






  
    
  
  
    
  
  
    
  






  
    
  
  
    
  
  
    
  


```

## Documentation

### Accessibility

| Attribute | Applied to | Outcome |
| -- | -- | -- |
| `aria-label="[button label text]"` | `.pf-v6-c-toggle-group__button` | Provides an accessible name for the button when an icon is used instead of text. **Required when icon is used with no supporting text** |
| `disabled` | `.pf-v6-c-toggle-group__button` | When a button element is used, indicates that it is unavailable and removes it from keyboard focus. **Required when button is disabled** |

### Usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-toggle-group` | `` | Initiates the toggle group. **Required** |
| `.pf-v6-c-toggle-group__button` | `