단계 표시기

단계 표시기는 서비스 이용을 위해 사용자가 거쳐야 하는 일련의 단계를 시각화하여 표현한 것으로 진행 상태에 대한 피드백을 사용자에게 전달한다.

단계 표시기는 서비스 이용을 위해 사용자가 거쳐야 하는 일련의 단계를 시각화하여 표현한 것으로 진행 상태에 대한 피드백을 사용자에게 전달한다.

사용 지침

민원 신청·회원 가입 같은 3단계 이상 절차에 사용해 사용자가 자신의 진행률을 인지할 수 있게 하고, 완료/진행 중/예정 상태를 색상·아이콘·텍스트로 함께 전달합니다.

예제

Default

  1. 1단계약관 동의
  2. 2단계본인 인증
  3. 3단계정보 입력
  4. 4단계가입 완료
examples/step-indicator/StepIndicatorDefault.tsx
import { StepIndicator, StepIndicatorItem } from "@/components/ui/dynamic/step-indicator"

export default function StepIndicatorDefault() {

All Completed

  1. 1단계약관 동의
  2. 2단계본인 인증
  3. 3단계정보 입력
  4. 4단계가입 완료
examples/step-indicator/StepIndicatorAllCompleted.tsx
import { StepIndicator, StepIndicatorItem } from "@/components/ui/dynamic/step-indicator"

export default function StepIndicatorAllCompleted() {

All Default

  1. 1단계약관 동의
  2. 2단계본인 인증
  3. 3단계정보 입력
  4. 4단계가입 완료
examples/step-indicator/StepIndicatorAllDefault.tsx
import { StepIndicator, StepIndicatorItem } from "@/components/ui/dynamic/step-indicator"

export default function StepIndicatorAllDefault() {

With Page Title

회원가입

  1. 1단계약관 동의
  2. 2단계본인 인증
  3. 3단계정보 입력
  4. 4단계가입 완료
examples/step-indicator/StepIndicatorWithPageTitle.tsx
import { StepIndicator, StepIndicatorItem } from "@/components/ui/dynamic/step-indicator"

export default function StepIndicatorWithPageTitle() {

속성

이름타입기본값설명
aria-labelstring단계 표시Defines a string value that labels the current element. @see aria-labelledby.
classNamestring——
currentStepnumber1—
idstring——
onClickMouseEventHandler<HTMLDivElement>——
styleCSSProperties——
tabIndexnumber——
typeenumfull—