Numeric Stepper (Visual Pattern)
수치 스테퍼 (시각적 패턴)
숫자 스테퍼는 숫자를 직접 입력할 수 있고, 더하거나 빼는 버튼이 있어요. 기본 숫자 입력이나 ARIA spinbutton 방식을 쓸 수도 있어요. 더하기와 빼기 버튼만 있다고 해서 이런 기능이 저절로 만들어지진 않아요.
실제 예시
티켓 수량의 경우, 한 사람은 4를 입력하거나 플러스 및 마이너스 컨트롤을 누를 수 있습니다.
주요 부분
- 01지속 라벨
- 02Input control
- 03Hint or format
- 04Validation message
사용할 때
한 단계 변경이 일반적인 경우 제한이 있는 수량에는 이 패턴을 사용하십시오. 올바른 입력 또는 스핀버튼 의미를 구축하고 테스트하십시오.
다음 경우에는 사용하지 마세요
시각적 이름을 접근성 역할로 취급하지 마십시오. 또한 너무 많은 눌림이 필요한 광범위한 경우에도 피하십시오.
코드에서 사용된 이름
<input type="number"> 출시하기 전에
Give each field a label that code can read. Link hints and errors, and keep entered values. Check autofill, keyboard order, validation timing, submit states, failure recovery, zoom, and languages.
Outcome：Complete the task with 수치 스테퍼 (시각적 패턴) (Numeric Stepper (Visual Pattern))。 User context：티켓 수량의 경우, 한 사람은 4를 입력하거나 플러스 및 마이너스 컨트롤을 누를 수 있습니다. Recommended pattern：수치 스테퍼 (시각적 패턴) (Numeric Stepper (Visual Pattern))。 Why it fits：한 단계 변경이 일반적인 경우 제한이 있는 수량에는 이 패턴을 사용하십시오. 올바른 입력 또는 스핀버튼 의미를 구축하고 테스트하십시오. Do not use it when：시각적 이름을 접근성 역할로 취급하지 마십시오. 또한 너무 많은 눌림이 필요한 광범위한 경우에도 피하십시오. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary)：하나의 공식 표준이 전체 용어를 통제하지 않음. 의미는 팀, 플랫폼 또는 프레임워크마다 달라질 수 있음. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
이 요청을 확인하세요
Review how 수치 스테퍼 (시각적 패턴) (Numeric Stepper (Visual Pattern)) is used now. Definition: 숫자 스테퍼는 숫자를 직접 입력할 수 있고, 더하거나 빼는 버튼이 있어요. 기본 숫자 입력이나 ARIA spinbutton 방식을 쓸 수도 있어요. 더하기와 빼기 버튼만 있다고 해서 이런 기능이 저절로 만들어지진 않아요. Release checks: Give each field a label that code can read. Link hints and errors, and keep entered values. Check autofill, keyboard order, validation timing, submit states, failure recovery, zoom, and languages. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.