All of the RateSelect components extend from
@radix-ui/react-select,
and inherits all of the documentation for those components. Features
- Composes a dropdown menu for selecting any playback speed, and handles syncing
with the underlying media element
- Keyboard navigation (with Radix) and adheres to
WAI-ARIA design patterns
Anatomy
Import the components and piece the parts together.
import * as Player from "@livepeer/react/player";
export default () => (
<Player.Root>
<Player.LiveIndicator>
<Player.RateSelect>
<Player.SelectTrigger>
<Player.SelectValue />
<Player.SelectIcon />
</Player.SelectTrigger>
<Player.SelectPortal>
<Player.SelectContent>
<Player.SelectScrollUpButton />
<Player.SelectViewport>
<Player.RateSelectItem>
<Player.SelectItemText />
<Player.SelectItemIndicator />
</Player.RateSelectItem>
<Player.SelectGroup>
<Player.SelectLabel />
<Player.RateSelectItem>
<Player.SelectItemText />
<Player.SelectItemIndicator />
</Player.RateSelectItem>
</Player.SelectGroup>
<Player.SelectSeparator />
</Player.SelectViewport>
<Player.SelectScrollDownButton />
<Player.SelectArrow />
</Player.SelectContent>
</Player.SelectPortal>
</Player.RateSelect>
</Player.LiveIndicator>
</Player.Root>
);
Props
RateSelect
Takes all props of the
Radix Select Root
component.
RateSelectItem
Takes all props of the
Radix Select Item
component.
value
Required - denote the playback speed value as a number.
Data Attributes
RateSelect
data-livepeer-rate-select
Identifies the rate select component within the Player.
data-rate
Indicates the selected playback speed value.
RateSelectItem
data-livepeer-rate-select-item
Identifies the rate select item within the Player. Last modified on February 18, 2026
