Skip to content
FrameworkStyle

CaptionsRadioGroup

A menu radio group for selecting caption and subtitle tracks

Creates radio items from the player text track state and selects the showing caption or subtitle track.

Anatomy 

<Menu.RadioGroup>
  <Menu.GroupLabel />
  <Menu.RadioItem>
    <Menu.ItemIndicator />
  </Menu.RadioItem>
</Menu.RadioGroup>

Behavior

The group is available when the configured media exposes at least one caption or subtitle track. The first generated option is Off; selecting it hides captions. Track labels use the track label, then language, then kind. Pass formatTrack to customize the visible labels.

useCaptionsOptions returns null when the text tracks feature is not configured. Use the returned options with Menu.RadioGroup.

Styling

Attribute Values Description
data-active Present / absent Present when captions are enabled.
data-disabled Present / absent Present when track selection is disabled.
data-availability "available" / "unavailable" Whether caption or subtitle tracks are available.

Accessibility

The group uses the menu radio group pattern.

Give Menu.RadioGroup an accessible name with aria-label or a nested Menu.GroupLabel.

Examples

Basic usage 

import { createPlayer, Menu, useCaptionsOptions } from '@videojs/react';
import { Video, videoFeatures } from '@videojs/react/video';
import type { ReactNode } from 'react';

const Player = createPlayer({ features: videoFeatures });

function CaptionsMenu(): ReactNode {
  const captions = useCaptionsOptions();
  if (captions?.state.availability !== 'available') return null;

  return (
    <Menu.Root side="top" align="end">
      <Menu.Trigger className="settings-trigger" render={<button type="button" />}>
        Captions
      </Menu.Trigger>
      <Menu.Content className="menu">
        <Menu.RadioGroup
          className="menu-group"
          value={captions.value}
          onValueChange={captions.setValue}
          aria-label="Captions"
        >
          {captions.options.map((option) => (
            <Menu.RadioItem key={option.value} value={option.value} disabled={option.disabled} className="menu-item">
              {option.label}
              <Menu.ItemIndicator checked={option.value === captions.value} forceMount className="menu-indicator">
                ✓
              </Menu.ItemIndicator>
            </Menu.RadioItem>
          ))}
        </Menu.RadioGroup>
      </Menu.Content>
    </Menu.Root>
  );
}

export default function BasicUsage() {
  return (
    <Player.Provider>
      <Player.Container className="media-container">
        <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoPlay muted playsInline loop>
          <track kind="captions" src="/docs/demos/captions-button/captions.vtt" srcLang="en" label="English" />
          <track kind="subtitles" src="/docs/demos/captions-button/captions.vtt" srcLang="es" label="Spanish" />
        </Video>
        <div className="menu-bar">
          <CaptionsMenu />
        </div>
      </Player.Container>
    </Player.Provider>
  );
}