{
  "name": "number-field",
  "title": "Number Field",
  "description": "A glass field flanked by ghost steppers that press individually. The border warms while you type, and the label doubles as a scrub area.",
  "category": "forms",
  "install": {
    "command": "npx shadcn@latest add @clow/number-field",
    "registryConfig": {
      "@clow": "https://clow.cards/r/{name}.json"
    }
  },
  "props": {
    "label": {
      "type": "text",
      "default": "Relay count"
    },
    "defaultValue": {
      "type": "number",
      "default": 4
    },
    "min": {
      "type": "number",
      "default": 0
    },
    "max": {
      "type": "number",
      "default": 16
    },
    "step": {
      "type": "number",
      "default": 1,
      "min": 1
    },
    "disabled": {
      "type": "boolean",
      "default": false
    }
  },
  "agent": {
    "prompt": "Use NumberField when the user types or steps to an exact number · quantities, limits, budgets. Pass label for the visible label; it is also a scrub area users can drag horizontally to change the value. Constrain with min/max/step, and pass format (Intl.NumberFormatOptions) for currency or percent display. Use value + onValueChange for controlled state, defaultValue for uncontrolled. When the rough position on a range is what matters, use Slider instead; for free-form text, use Input.",
    "examples": [
      "<NumberField label=\"Relay count\" defaultValue={4} min={0} max={16} />",
      "<NumberField label=\"Uplink budget\" defaultValue={1200} min={0} format={{ style: \"currency\", currency: \"USD\" }} />",
      "<NumberField label=\"Duty cycle\" defaultValue={0.35} min={0} max={1} step={0.05} format={{ style: \"percent\" }} />"
    ]
  },
  "dependencies": [
    "@base-ui/react",
    "iconsax-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "links": {
    "docs": "https://clow.cards/docs/number-field",
    "markdown": "https://clow.cards/llms/number-field.md",
    "registryItem": "https://clow.cards/r/number-field.json"
  }
}
prop	type	default
label	text	Relay count
defaultValue	number	4
min	number	0
max	number	16
step	number	1
disabled	boolean	false
Draw

Playground

Examples

Props
