Pad

The headless Pad of @audio-ui/react: its parts, what each renders and owns, and their props.


pnpm add @audio-ui/react

import { Pad } from "@audio-ui/react/pad";

Export	Kind	What it is
`Pad.Item`	function	One pad.
`Pad.Root`	function	A grid of pads to strike: each one sounds while held, by pointer or from the keyboard, and each pointer holds its own pad, so several can be played at once on a touch screen.

Anatomy

Import the primitive and assemble its parts.

import { Pad } from "@audio-ui/react";

<Pad.Root>
  <Pad.Item value="kick">Kick</Pad.Item>
</Pad.Root>

API reference

Root

A grid of pads to strike: each one sounds while held, by pointer or from the keyboard, and each pointer holds its own pad, so several can be played at once on a touch screen. A strike is harder where a pen or screen presses harder, or else toward the top of the pad. The pads are one tab stop: the left and right arrows walk them in reading order, the up and down arrows by a row of columns. Renders a <div> element.

Props · 5

Data attributes · 1

data-disabled

Present when disabled.

Item

One pad. It sounds while held: by pointer, or with Enter or Space while focused. Its accessible name comes from its content, or aria-label. How hard it was last struck is the --pad-velocity CSS variable, from 0 to 1. Renders a <button> element.

Props · 3

Data attributes · 2

data-active

Whether the pad is sounding: held here, or listed in activePads.

data-disabled

Present when disabled.

Styled

The registry's styled Pad, its usage and interaction: Pad.

Piano Sequencer

Built by Ouest Labs, the source code is available on GitHub.

RSS