Voice Picker | Zyeon UI

Preview in your theme

status='ready' · variant='grid' — six voices, all visible. The samples are synthesised in the mock as data: URLs, so play actually makes a sound offline: start one and the previous one stops mid-note, because the picker holds ONE element and ONE id. Nova has no sample and says so; Corvo's sample is deliberately corrupt, so its play button lands in the failure branch. Tab reaches the chosen card, arrows move the choice, P auditions the focused card without selecting it.

no callback fired yet

status='ready' · variant='dropdown' — the same contract as a combobox + listbox for a composer toolbar. Twelve seeded voices; the panel scrolls and arrows clamp at both ends. A listbox option may not hold a focusable child, so the row's play glyph is pointer-only and the keyboard path is P on the trigger — which is also the audition control sitting next to it.

Controlled preview: `previewingId` is passed, so the picker never touches audio — its element is never handed a source; it only reports intent through onPreviewChange and renders whatever this demo says is sounding. That is the seam for a streaming TTS engine or a shared page-level player. Note the waveform runs with nothing playing: the picker draws the state it is given.

no callback fired yet

Content that breaks naive cards: a 51-character provider name, an unusual BCP-47 tag and eight style tags against maxTags=3. The name wraps instead of widening the grid (wrap-anywhere + min-w-0), and the folded tags become '+5' on screen while staying in the option's accessible name.

A committed id that isn't in the catalogue — the picker says so instead of silently resetting to nothing, because a voice that vanished from your plan is a fact the user has to act on. Picking any card replaces it.

The selected voice aria-en-us-legacy-v1 isn't in this catalogue. Pick another one to replace it.

status='loading' — the catalogue request is still out. Skeleton cards match the real card's box, and the pulse stops under prefers-reduced-motion.

status='empty' — no voice exists for this language yet. It says what happens instead of leaving a bordered box with nothing in it.

No voices available

No voice is available for this language yet. Replies will be spoken with the account default.

status='error' — the catalogue failed to load, which is a different failure from one sample refusing to play. role='alert', the request id survives on its own line, and Try again is only rendered when you pass onRetry.

Couldn't load the voices

The voice catalogue didn't respond. request-id: 41c9-7ae0

no callback fired yet

Loading preview…

This component is part of Pro

The install command, prompt and concept map are included with a Pro license — one purchase unlocks every Pro component, forever.

Unlock with Pro