Stepper overview

Stepper wraps the headless root with a baseline shell and an accessible label, while the generated or projected styled items manage value, state attributes, and keyboard focus.

Imports

Import the wrapper for [steps]. Add TngStepperItemComponent when composing declarative item children.

import {
  TngStepperComponent,
  TngStepperItemComponent,
  type TngStepperStep,
} from '@tailng-ui/components';

Accessibility baseline

• The styled item renders a headless trigger that applies aria-current="step".
• Arrow keys move focus across enabled triggers in document order.
• Optional, error, and completed inputs feed the generated state and accessible labels.