Components · Forms & selection

Number input

An input for bounded numeric values with a stacked increment/decrement stepper. The field matches the base input; the controls column is divided by a hairline and reserves 36px of right padding so typed values never collide with the steppers.

Preview

Light

Dark

Accessibility

Spec

Values and token references straight from the Zetta spec.

number-input

backgroundColor: {colors.surface-card}
textColor: {colors.ink}
placeholderColor: {colors.placeholder}
placeholderStyle: italic
borderColor: {colors.border-strong}
borderWidth: 1px
borderRadius: {rounded.base}
fontFamily: Geist
fontSize: 14px
fontWeight: 400
lineHeight: 1.6
height: 32px
paddingX: 14px
paddingY: 10px
paddingRight: 36px

number-input-hover

borderColor: {colors.border-strong}
boxShadow: {shadows.sm}

number-input-focus

borderColor: {colors.border-focus}
outline: 2px solid {colors.border-focus}
outlineOffset: 2px

number-input-invalid

borderColor: {colors.danger}

number-input-invalid-focus

borderColor: {colors.danger}
outline: 2px solid {colors.danger}
outlineOffset: 2px

number-input-disabled

backgroundColor: {colors.disabled-bg}
textColor: {colors.disabled-text}
borderColor: {colors.disabled-border}
cursor: not-allowed

number-input-controls

display: flex
flexDirection: column
position: absolute
right: 0
top: 0
bottom: 0
width: 28px
borderLeftColor: {colors.border-strong}
borderLeftWidth: 1px

number-input-step

height: 50%
width: 100%
display: flex
alignItems: center
justifyContent: center
backgroundColor: transparent
iconColor: {colors.muted}
iconSize: 12px
cursor: pointer

number-input-step-hover

backgroundColor: {colors.surface-muted}
iconColor: {colors.ink}

number-input-step-active

backgroundColor: {colors.brand}
iconColor: {colors.brand-text}

number-input-step-disabled

iconColor: {colors.disabled-text}
cursor: not-allowed

Build with the skill

No package to install — hand this to your AI to generate the number input in your stack.

Prompt for your AI

Implement the Zetta "Number input" component in this project's stack using the zetta-design-md skill.

- Apply the `number-input` spec from the skill (variants: default, invalid, disabled).
- Use this project's own component conventions and framework idioms.
- Reference the Zetta design tokens (CSS variables) for every color, radius, and shadow — never hardcode values.
- Implement all states (hover, focus, active, disabled, and invalid where applicable) with a visible 2px focus ring.
- Honor the Zetta guardrails (brand never shifts hue, shadows for overlays only, etc.) and verify in Light, Dark, and Accessibility.

Anatomy & rules

32px field, base radius, hairline-strong border; the stepper column is 28px wide with a hairline left divider. Steps tint surface-muted on hover and brand while pressed.
Keep the native type="number" semantics (or inputmode="numeric") so mobile shows the numeric keypad and min/max/step are enforced.

Accessibility

Label the field, and give each stepper an aria-label (Increase / Decrease). Arrow keys must adjust the value; respect min, max and step.