CompositionAvailable

Playback Settings

Compact speed and repeat popovers with automatic reading preference.

Loading example…

Installation

Add the component and its dependencies from the registry running on your computer.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/playback-settings.json

Usage

Import the component into your project and keep the source code under your control.

tsx

"use client";
import { useState } from "react";
import { PlaybackSettings } from "@/components/ui/playback-settings";
export default function Demo() {
  const [speed, setSpeed] = useState(1);
  const [repetitions, setRepetitions] = useState(2);
  const [autoPlay, setAutoPlay] = useState(true);
  return (
    <PlaybackSettings
      speed={speed}
      repetitions={repetitions}
      autoPlay={autoPlay}
      onSpeedChange={setSpeed}
      onRepetitionsChange={setRepetitions}
      onAutoPlayChange={setAutoPlay}
    />
  );
}

States & interaction

Appearance, behavior and keyboard checks.

The composition inherits its controls’ states. Test empty, content, loading and error cases where the application needs them.
Examples on this page are runnable; the displayed code uses the same components. Business logic belongs to the consumer.
Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

Prop	Type	Default	Description
speed / onSpeedChange	number / callback	See example	Playback rate from 0.5 to 2 in increments of 0.25.
repetitions / onRepetitionsChange	number / callback	See example	One to five readings per playback sequence.
autoPlay / onAutoPlayChange	boolean / callback	See example	Consumer owns persistence and audio scheduling.
labels / disabled	object / boolean	See example	Localized names and disabled state.

Accessibility

Rules that should remain intact when adapting the component to a product.

Controls have accessible names, visible focus and keyboard support.