---
title: QualityRadioGroup
frameworkTitle:
  html: media-quality-radio-group
description: A menu radio group for selecting video quality
---

import ComponentReference from "@/components/docs/api-reference/ComponentReference.astro";
import DocsLink from "@/components/docs/DocsLink.astro";
import FrameworkCase from "@/components/docs/FrameworkCase.astro";
import StyleCase from "@/components/docs/StyleCase.astro";
import Demo from "@/components/docs/demos/Demo.astro";

{/* React demos */}
import BasicUsageDemoReact from "@/components/docs/demos/quality-radio-group/react/css/BasicUsage";
import basicUsageReactTsx from "@/components/docs/demos/quality-radio-group/react/css/BasicUsage.tsx?raw";
import basicUsageReactCss from "@/components/docs/demos/quality-radio-group/react/css/BasicUsage.css?raw";

{/* HTML demos */}
import BasicUsageDemoHtml from "@/components/docs/demos/quality-radio-group/html/css/BasicUsage.astro";
import basicUsageHtml from "@/components/docs/demos/quality-radio-group/html/css/BasicUsage.html?raw";
import basicUsageHtmlCss from "@/components/docs/demos/quality-radio-group/html/css/BasicUsage.css?raw";
import basicUsageHtmlTs from "@/components/docs/demos/quality-radio-group/html/css/BasicUsage.ts?raw";

Creates radio items from the player video rendition state and selects automatic or manual quality.

## Anatomy

<FrameworkCase frameworks={["react"]}>
  ```tsx
  <Menu.RadioGroup>
    <Menu.GroupLabel />
    <Menu.RadioItem>
      <Menu.ItemIndicator />
    </Menu.RadioItem>
  </Menu.RadioGroup>
  ```
</FrameworkCase>

<FrameworkCase frameworks={["html"]}>
  ```html
  <media-quality-radio-group>
    <template>
      <media-menu-radio-item>
        <span data-part="label"></span>
        <span data-part="tier"></span>
        <span data-part="badge"></span>
        <media-menu-item-indicator></media-menu-item-indicator>
      </media-menu-radio-item>
    </template>
  </media-quality-radio-group>
  ```
</FrameworkCase>

## Behavior

The group is available when the configured media exposes more than one video rendition. The first generated option is `Auto`; selecting it returns control to adaptive bitrate selection. Pass `formatRendition` to customize visible rendition labels.

<FrameworkCase frameworks={["react"]}>
<DocsLink slug="reference/use-quality-options">`useQualityOptions`</DocsLink> returns `null` when the <DocsLink slug="reference/feature-quality">quality feature</DocsLink> is not configured. Use the returned options with <DocsLink slug="reference/menu">`Menu.RadioGroup`</DocsLink>.
</FrameworkCase>

<FrameworkCase frameworks={["html"]}>
`<media-quality-radio-group>` generates `<media-menu-radio-item>` children. Add an optional `<template>` with a single `<media-menu-radio-item>` to customize each generated item.
</FrameworkCase>

## Styling

| Attribute | Values | Description |
| --- | --- | --- |
| `data-quality` | `string` | Current quality value. |
| `data-disabled` | Present / absent | Present when quality selection is disabled. |
| `data-availability` | `"available"` / `"unavailable"` | Whether multiple renditions are available. |

<FrameworkCase frameworks={["html"]}>
  ```css
  media-quality-radio-group[data-availability="unavailable"] {
    display: none;
  }
  ```
</FrameworkCase>

## Accessibility

The group uses the menu radio group pattern.

<FrameworkCase frameworks={["react"]}>
Give `Menu.RadioGroup` an accessible name with `aria-label` or a nested `Menu.GroupLabel`.
</FrameworkCase>

<FrameworkCase frameworks={["html"]}>
The element receives an accessible label from the `label` property or defaults to `Quality`.
</FrameworkCase>

## Examples

### Basic usage

<FrameworkCase frameworks={["react"]}>
  <StyleCase styles={["css"]}>
    <Demo files={[
      { title: "App.tsx", code: basicUsageReactTsx, lang: "tsx" },
      { title: "App.css", code: basicUsageReactCss, lang: "css" },
    ]}>
      <BasicUsageDemoReact client:idle />
    </Demo>
  </StyleCase>
</FrameworkCase>

<FrameworkCase frameworks={["html"]}>
  <StyleCase styles={["css"]}>
    <Demo files={[
      { title: "index.html", code: basicUsageHtml, lang: "html" },
      { title: "index.css", code: basicUsageHtmlCss, lang: "css" },
      { title: "index.ts", code: basicUsageHtmlTs, lang: "ts" },
    ]}>
      <BasicUsageDemoHtml />
    </Demo>
  </StyleCase>
</FrameworkCase>

<FrameworkCase frameworks={["html"]}>
  <ComponentReference component="QualityRadioGroup" />
</FrameworkCase>
