Jump To Slide Form

ProNew

Use this when a carousel is long: a small "Go to slide" number field with a Go button that moves to that slide, rejects a number out of range with a linked error and announces where you landed.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

label

Guide and examples

When to use it

Use it for carousels of twenty or more slides, such as a photo set or a deck, where dots would be a wall and Next is slow.

Do not use it for short carousels where dots are enough, or when slides have names people would search by.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`items`	`CarouselItem[]`	`-`	The slides: `{ id, label, content }`.
`label`	`string`	`-`	Accessible name of the carousel.

Accessibility

The field has a visible label and describes its range ("1 to 24"); a bad number sets aria-invalid and shows a role alert linked with aria-describedby.
Going to a slide is announced politely and the field keeps its value, so it can be adjusted.
Enter in the field submits, so a keyboard user never has to find the button.
Keyboard: Enter in the field: go to that slide

Testing

The pattern ships with a Testing Library test (jump-to-slide-form.test.tsx). Embla needs layout to count snaps, and jsdom has none, so the repo's mockCarouselLayout helper gives the viewport and slides real sizes.