UI Skillbook
2

Number Field

A numeric input with step buttons, bounds, locale formatting and optional drag-to-scrub.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-number-field and follow the Siteplane Number Field skill it prints for this task.

Paste this into your agent.

Number Field holds numbers people adjust: quantities, seats, timeouts, budgets. It keeps the value numeric while showing it formatted, and clamps it to your range.

Install

bashnpx shadcn@4.18.0 add @siteplane/number-field

Import it from @/siteplane/components/number-field. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Slider: Pick Slider when an approximate position on a range matters more than an exact number.
  • vs Input: Pick Input for digit strings that are not quantities, like phone numbers or postcodes.
  • vs OTP Field: Pick OTP Field for a fixed-length verification code.

Rules

  • Compose NumberFieldGroup with NumberFieldDecrement, NumberFieldInput and NumberFieldIncrement, and add NumberFieldScrubArea with a label for scrubbing.
  • Use null for an empty value, and constrain edits with min, max and step.
  • Pass format and locale for currency or percent; the stored value stays a plain number.
  • Put the name on the surrounding Field so Form submits the number, and add className="w-full" when it should fill a column.
  • Keep the label above the control. Number Field has no floating label.

Reference

  • Number Field docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Forms & selection. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-number-field

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Form Field Validation Timingby UI Skillbook

Validate at the right moment — not on every keystroke, not only on submit.

Forms

Siteplane Attachmentby UI Skillbook

A card for a file or image attached to a message or draft, with upload states and actions.

Siteplane UI

Siteplane Autocompleteby UI Skillbook

A text input that suggests completions while still accepting whatever the person types.

Siteplane UI

Siteplane Calendarby UI Skillbook

An inline month grid for picking a single date, several dates or a range, with unavailable-day rules.

Siteplane UI

Back to Siteplane UI