Step Indicator

import { StepIndicator } from "@/components/ui/step-indicator"

const steps = [

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/step-indicator.json

사용법

import { StepIndicator } from "@/components/ui/step-indicator"

<StepIndicator currentStep={2} steps={[{ label: "정보 입력" }, { label: "서류 첨부" }, { label: "제출 완료" }]} />

KRDS 정렬

StepIndicator는 신청/가입 등 다단계 서비스 진행 상태를 semantic nav/ol 구조로 표현합니다. progress primitive를 변경하지 않고 단계별 label, description, status를 명시합니다.

구성

다음 조합으로 StepIndicator를 사용할 수 있습니다.

StepIndicator

예제

Basic

다단계 절차에서 현재 단계, 완료 단계, 예정 단계를 안내하는 진행 단계 컴포넌트입니다.

import { StepIndicator } from "@/components/ui/step-indicator"

const steps = [

API 참조