Count Indicator

Description

Count Indicator shows progress in a sequence (for example, carousel items) with optional helper text, dots, and previous/next buttons.

Use it when users move step by step through a sequence with a known total. For large totals, the component automatically condenses the dots (based on maxDots) while still reflecting the full count.

Component

Properties

Prop	Type	Description	Required
total	number	Total number of items.	✅
index	number	Zero-based current item index.	✅
onPrev	() => void	Previous action callback.	✅
onNext	() => void	Next action callback.	✅
wrap	boolean	Loops navigation at boundaries.
showHelper	boolean	Show X of Y helper text. Default true.
showButtons	boolean	Show previous/next buttons. Default true.
showDots	boolean	Show dots indicator. Default true.
maxDots	number	Maximum number of rendered dots. Default 10.
semanticDots	boolean	Use 1:1 semantic dots when total <= maxDots. Default true.
ariaLabel	string	Label for the root group.	✅
ariaLabelDots	string	Label for dots group.	✅
prevAriaLabel	string	Previous button aria-label.	✅
nextAriaLabel	string	Next button aria-label.	✅
helperOfLabel	string	Translation for of in helper text.	✅
className	string	Extra class name for root element.

Example: default

import { useState } from 'react';
import { CountIndicator } from '@tmedxp/react-components';

const CountIndicatorDefaultExample = () => {
  const total = 10;
  const [index, setIndex] = useState(0);

  return (
    <CountIndicator
      total={total}
      index={index}
      ariaLabel="count indicator"
      ariaLabelDots="progress"
      prevAriaLabel="previous"
      nextAriaLabel="next"
      helperOfLabel="of"
      onPrev={() => setIndex((i) => Math.max(0, i - 1))}
      onNext={() => setIndex((i) => Math.min(total - 1, i + 1))}
    />
  );
};

export { CountIndicatorDefaultExample };

Example: helper and dots only

import { CountIndicator } from '@tmedxp/react-components';

const CountIndicatorSimpleExample = () => {
  return (
    <CountIndicator
      total={42}
      index={5}
      onPrev={() => {}}
      onNext={() => {}}
      showButtons={false}
      maxDots={5}
      ariaLabel="count indicator"
      ariaLabelDots="progress"
      prevAriaLabel="previous"
      nextAriaLabel="next"
      helperOfLabel="of"
    />
  );
};

export { CountIndicatorSimpleExample };