Forms

Number Input

semantic HTML

증감 제어와 범위 검증을 포함한 숫자 입력입니다.

stablefreeSince 0.2

Live example

Quantity

Quantity: 2

<label id="quantity-label">Quantity</label>
<div data-standard-component="number-input" label="Quantity" value="2" min="1" max="10" step="1" aria-labelledby="quantity-label"><label>Quantity<input type="number" value="2" min="1" max="10"></label></div>
<output data-example-output aria-live="polite">Quantity: 2</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.2`
HTML contract	`Native HTML elements and attributes`
Events	`Native browser events`

Accessibility

label로 입력 목적을 제공하며 min, max, step, required의 native validity와 disabled 상태를 폼에 반영합니다.

Server template guidance

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