Use Stepper

Open-code aq-ui React hook for Use Stepper.

Installation

pnpm dlx aq-ui@alpha add use-stepper

API reference

Client module

Import the parts you need, then jump to an export for its contract.

View full source

Quick start

"use client"

import { useStepper } from "@/hooks/use-stepper"

StepperController

interfaceSource L40

Type contract for StepperController.

interface StepperController<T extends StepperStep>

Members

Name	Type
`steps`	`T[]`
`value`	`string \| undefined`
`currentStep`	`T \| undefined`
`currentIndex`	`number`
`completedIds`	`string[]`
`isFirst`	`boolean`
`isLast`	`boolean`
`canPrevious`	`boolean`
`canNext`	`boolean`
`isValidating`	`boolean`
`validationError`	`string \| undefined`
`goTo`	`(id: string) => Promise<boolean>`
`next`	`() => Promise<boolean>`
`previous`	`() => Promise<boolean>`
`completeStep`	`(id?: string) => void`
`uncompleteStep`	`(id: string) => void`
`complete`	`() => Promise<boolean>`
`reset`	`() => void`
`getStepState`	`(id: string) => StepperStepState`

StepperStep

interfaceSource L8

Type contract for StepperStep.

interface StepperStep

Members

Name	Type
`id`	`string`
`disabled?`	`boolean`
`optional?`	`boolean`

StepperStepState

typeSource L14

Type contract for StepperStepState.

type StepperStepState = "current" | "complete" | "upcoming" | "error" | "disabled"

StepperValidationContext

interfaceSource L17

Type contract for StepperValidationContext.

interface StepperValidationContext<T extends StepperStep>

Members

Name	Type
`step`	`T`
`target`	`T`
`signal`	`AbortSignal`

StepperValidationResult

typeSource L23

Type contract for StepperValidationResult.

type StepperValidationResult = boolean | string | void

useStepper

functionSource L64

Open-code aq-ui React hook for Use Stepper.

function useStepper<T extends StepperStep>({ steps, value: valueProp, defaultValue, onValueChange, completedIds: completedIdsProp, defaultCompletedIds = EMPTY_COMPLETED, onCompletedIdsChange, linear = false, validate, onComplete, }: UseStepperOptions<T>): StepperController<T>

Returns: StepperController<T>

Parameters

Name	Type
`options`	`UseStepperOptions<T>`

UseStepperOptions

interfaceSource L25

Type contract for UseStepperOptions.

interface UseStepperOptions<T extends StepperStep>

Members

Name	Type	Default
`steps`	`T[]`	`—`
`value?`	`string`	`—`
`defaultValue?`	`string`	`—`
`onValueChange?`	`(value: string) => void`	`—`
`completedIds?`	`string[]`	`—`
`defaultCompletedIds?`	`string[]`	`EMPTY_COMPLETED`
`onCompletedIdsChange?`	`(ids: string[]) => void`	`—`
`linear?`	`boolean`	`false`
`validate?`	`( context: StepperValidationContext<T> ) => StepperValidationResult \| Promise<StepperValidationResult>`	`—`
`onComplete?`	`() => void`	`—`

Use Stepper

Installation

API reference

Quick start

StepperController

Members

StepperStep

Members

StepperStepState

StepperValidationContext

Members

StepperValidationResult

useStepper

Parameters

UseStepperOptions

Members

Registry dependencies

Files

Source