Stepper
A progress indicator for multi-step flows like checkout, sign-up and setup wizards.
- 2-qadam, 4 tadan: Yetkazib berishManzil va vaqt
- 3-qadam, 4 tadan: To'lov
- 4-qadam, 4 tadan: Tasdiqlashixtiyoriy
2-qadam, 4 tadan:Yetkazib berish
'use client';
import { Button, Stepper } from '@akhatmirzo/ui';
import { useState } from 'react';
const steps = [
{ title: 'Savat' },
{ title: 'Yetkazib berish', description: 'Manzil va vaqt' },
{ title: "To'lov" },
{ title: 'Tasdiqlash', optional: true },
];
export default function StepperBasic() {
const [step, setStep] = useState(1);
return (
<div className="flex w-full flex-col gap-6">
<Stepper steps={steps} value={step} onValueChange={setStep} aria-label="Buyurtma" />
<div className="flex gap-2">
<Button size="sm" disabled={step === 0} onClick={() => setStep(step - 1)}>
Orqaga
</Button>
<Button
size="sm"
variant="primary"
disabled={step === steps.length}
onClick={() => setStep(step + 1)}
>
Davom etish
</Button>
</div>
</div>
);
}
Import
import { Stepper } from '@akhatmirzo/ui';When to use
- Sequential flows — checkout (Cart → Delivery → Payment), sign-up, application forms. Users see where they are and how much is left.
- 3–6 steps work best. If you have more, group them.
- Not for independent sections — use
Tabsfor those. - Not for site structure — use
Breadcrumb.
Steps and statuses
steps is a list of { title, description?, icon?, optional?, status? }. value is the current
step index (0-based). Each step's status (data-status) is derived automatically:
| Status | When | Circle |
|---|---|---|
complete | index < value | filled primary + ✓ |
current | index = value | primary border with a halo |
upcoming | index > value | gray border + number |
error | step has status: 'error' | danger fill + ! |
value={steps.length} marks every step as complete. The connector fills with primary up to the
current step (300ms).
- 1-qadam, 4 tadan: Ma'lumotlar, bajarildi
- 2-qadam, 4 tadan: Hujjatlar, xatoPasport rasmi o'qilmadi
- 3-qadam, 4 tadan: Tekshiruv
- 4-qadam, 4 tadan: Shartnoma
3-qadam, 4 tadan:Tekshiruv
'use client';
import { Stepper } from '@akhatmirzo/ui';
export default function StepperStates() {
return (
<Stepper
aria-label="Ariza"
value={2}
className="w-full"
steps={[
{ title: "Ma'lumotlar" },
{ title: 'Hujjatlar', status: 'error', description: "Pasport rasmi o'qilmadi" },
{ title: 'Tekshiruv' },
{ title: 'Shartnoma' },
]}
/>
);
}
Navigating between steps
With onValueChange, completed steps become buttons, so users can go back and fix their input.
allowFutureSteps lets them jump ahead too (useful for optional setup wizards). The current step is
never a button.
Vertical
orientation="vertical" stacks the steps in a column — handy for long descriptions or a side panel.
- 2-qadam, 4 tadan: To'lov usullariClick, Payme, naqd
'use client';
import { Stepper } from '@akhatmirzo/ui';
import { useState } from 'react';
export default function StepperVertical() {
const [step, setStep] = useState(1);
return (
<Stepper
orientation="vertical"
aria-label="Do'konni sozlash"
value={step}
onValueChange={setStep}
allowFutureSteps
steps={[
{ title: "Do'kon nomi", description: "Mijozlar ko'radigan nom" },
{ title: "To'lov usullari", description: 'Click, Payme, naqd' },
{ title: 'Yetkazib berish', description: 'Hududlar va narxlar' },
{ title: 'Ishga tushirish' },
]}
/>
);
}
Sizes
size — sm (24px circle) or md (32px, default).
- 1-qadam, 3 tadan: Savat, bajarildi
- 2-qadam, 3 tadan: Yetkazib berish
- 3-qadam, 3 tadan: To'lov
2-qadam, 3 tadan:Yetkazib berish
- 1-qadam, 3 tadan: Savat, bajarildi
- 2-qadam, 3 tadan: Yetkazib berish
- 3-qadam, 3 tadan: To'lov
2-qadam, 3 tadan:Yetkazib berish
'use client';
import { Stepper } from '@akhatmirzo/ui';
const steps = [{ title: 'Savat' }, { title: 'Yetkazib berish' }, { title: "To'lov" }];
export default function StepperSizes() {
return (
<div className="flex w-full flex-col gap-8">
<Stepper steps={steps} defaultValue={1} size="sm" aria-label="Kichik" />
<Stepper steps={steps} defaultValue={1} aria-label="O'rtacha" />
</div>
);
}
Compact view
compact="auto" (default) switches a horizontal stepper to 2 / 4 · Yetkazib berish plus a
progress bar on screens narrower than 640px. Both views are rendered and CSS hides one, so there is
no SSR hydration mismatch. compact always uses the compact view, compact={false} never does.
2-qadam, 4 tadan:Yetkazib berish
'use client';
import { Stepper } from '@akhatmirzo/ui';
const steps = [
{ title: 'Savat' },
{ title: 'Yetkazib berish' },
{ title: "To'lov" },
{ title: 'Tasdiqlash' },
];
export default function StepperCompact() {
return (
<div className="w-full max-w-xs">
<Stepper steps={steps} value={1} compact />
</div>
);
}
Props
Other <div> attributes go to the root; aria-label / aria-labelledby go to the <ol> list.
| Prop | Type | Default | Description |
|---|---|---|---|
stepsrequired | { title: ReactNode; description?: ReactNode; icon?: ReactNode; optional?: boolean; status?: 'error' }[] | — | The steps |
value | number | — | Current step index, 0-based (controlled) |
defaultValue | number | 0 | Initial step |
onValueChange | (index: number) => void | — | Makes completed steps clickable |
allowFutureSteps | boolean | false | Allow jumping to upcoming steps |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Direction |
size | 'sm' | 'md' | 'md' | Circle: 24 / 32px |
compact | boolean | 'auto' | 'auto' | Compact view; `auto` — horizontal only, below 640px |
labels | { step?: (i, n) => string; optional?; completed?; error? } | — | Screen reader texts (Uzbek by default) |
Data attributes
| Attribute | Where | Value |
|---|---|---|
data-status | step, indicator | complete · current · upcoming · error |
data-clickable | step button | present on clickable steps |
data-orientation | root, list | horizontal · vertical |
data-size | root | sm · md |
Accessibility
- Structure. Steps live in an
<ol>; give it anaria-label("Order steps"). - The current step has
aria-current="step". - Hidden texts. Each step starts with "2-qadam, 4 tadan" (step 2 of 4); completed steps add "bajarildi" and errors add "xato". Color is not the only signal — there are ✓ and ! icons too.
- Keyboard. Clickable steps are plain
<button>s:Tabto move,Enter/Spaceto select. Other steps are not focusable. - Motion. Connector and color transitions are disabled under
prefers-reduced-motion.