Spinbutton
스핀버튼
스핀버튼은 특정 범위에서 하나의 값을 선택하는 컨트롤의 ARIA 이름입니다. 사용자는 보통 값을 입력하거나 값을 올리거나 내릴 수 있습니다. 숫자 스테퍼는 그 예시 중 하나입니다.
실제 예시
실험실 작업자는 온도를 37.5°C로 설정합니다. 화살표 위키는 0.5를 추가하고, Page Up은 5를 추가하며, 값은 확인된 최대값 45°C에서 멈춥니다. 잘못된 텍스트를 붙여넣으면 조용히 변경하는 대신 오류가 표시됩니다.
주요 부분
- 01편집 가능한 값
- 02증가 컨트롤
- 03범위와 단계
사용할 때
사람들이 값을 일정 단계로 자주 조정하고 값을 입력해야 할 때 사용하세요. 값에는 명확한 제한이 있어야 합니다.
다음 경우에는 사용하지 마세요
플러스 및 마이너스 버튼만으로는 스핀버튼을 만들 수 없습니다. 제한이 없는 값, 매우 긴 선택 목록, 또는 일반 입력이 더 명확한 작업에서는 이를 피하세요.
코드에서 사용된 이름
input[type=number] or role=spinbutton with valuemin/valuemax/valuenow 출시하기 전에
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 스핀버튼 (Spinbutton)。 User context：실험실 작업자는 온도를 37.5°C로 설정합니다. 화살표 위키는 0.5를 추가하고, Page Up은 5를 추가하며, 값은 확인된 최대값 45°C에서 멈춥니다. 잘못된 텍스트를 붙여넣으면 조용히 변경하는 대신 오류가 표시됩니다. Recommended pattern：스핀버튼 (Spinbutton)。 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)：이 표준은 나열된 범위만 적용합니다. 시각적 스타일, 제품 결정, 또는 Vibulary 예시는 선택하지 않습니다. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
이 요청을 확인하세요
Review how 스핀버튼 (Spinbutton) is used now. Definition: 스핀버튼은 특정 범위에서 하나의 값을 선택하는 컨트롤의 ARIA 이름입니다. 사용자는 보통 값을 입력하거나 값을 올리거나 내릴 수 있습니다. 숫자 스테퍼는 그 예시 중 하나입니다. 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.