Navigation

Stepper

semantic HTML

여러 단계 작업의 현재 위치와 완료 상태를 표시합니다.

stablefreeSince 0.3

Live example

Profile

<nav data-standard-component="stepper" aria-label="Progress"><ol class="standard-stepper"><li>Account</li><li aria-current="step">Profile</li><li>Review</li><li>Complete</li></ol><button type="button" data-step-prev>Previous</button><button type="button" data-step-next>Next</button></nav><output data-example-output aria-live="polite">Profile</output>

Variants and sizes

The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.

compactcomfortableroomy

Public API

Contract	Value
Implementation	`semantic HTML`
Status	`stable`
License	`free`
Since	`0.3`
HTML contract	`Native HTML elements and attributes`
Events	`Native browser events`

Accessibility

현재 단계에는 aria-current=step이 적용됩니다. 이 컴포넌트는 진행 표시 전용이며 단계 이동 버튼과 폼 검증은 애플리케이션에서 제공합니다.

Server template guidance

<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->