Canonical inventory
Forms · core
Bounded range
field.rangeBounded range: An input control that gathers, changes, or validates a value.
bounded rangethe place you enter a valuethe input control
States8
Touch target44px
Evidence6
Introduced by2 kits
Visual specimen
Same contract. Every kit voice.
Translation table
What code calls it.
Web<input type=range>The closest native or standardized web primitive.direct
ARIAsliderThe primary accessibility role or state pattern.direct
SwiftUICustom View compositionSwiftUI has no single direct equivalent; compose and name the behavior explicitly.approximation
AppKitCustom NSView compositionAppKit has no single direct equivalent; use a custom view or controller composition.approximation
Anatomy
Every part, named.
- 1Label
- 2Input surface
- 3Current value or placeholder
- 4Supporting or error text
- 5Focus and validation treatment
Often confused with
Similar shape. Different contract.
Prompt · paste into your agent
Ask for the exact thing.
Implement the canonical Bounded range component (field.range). Bounded range: An input control that gathers, changes, or validates a value. Support these states: default, hover, focus-visible, active, disabled, filled, error, loading. Use semantic design tokens rather than raw visual values. Preserve a minimum 44px touch target where interactive. Provide and verify: implementation, state-matrix, responsive, keyboard, touch, reduced-motion. Keep the component API stable so every Studio kit can supply its own rendering without changing the behavior contract.Studio contract
What must be proven.
Required states
default · hover · focus-visible · active · disabled · filled · error · loading
Required evidence
implementation · state-matrix · responsive · keyboard · touch · reduced-motion
Source union
aurora · purple-rain