> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.makeswift.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.makeswift.com/_mcp/server.

# Number

> Adds a Number input in the Makeswift builder to visually edit a `number` prop.

Adds a Number input in the Makeswift builder to visually edit a `number` prop.

![](/_fern-img/42d432d0d9757f473d62be816afd64aef27b47ebc384ea7c1d4f4fcbc911b812.webp)

## Params

**`label`** `string` — default: Number

Text for the panel label in the Makeswift builder.

---

**`description`** `string`

The description shown in the Panel of the Makeswift builder. This can be written in Markdown format.
Added in [`v0.24.8`](https://github.com/makeswift/makeswift/releases/tag/%40makeswift%2Fruntime%400.24.8).

---

**`labelOrientation`** `"horizontal" | "vertical"` — default: horizontal

Orientation of the number label within the panel.

---

**`defaultValue`** `number`

The value passed to your component when nothing is set in the Makeswift
builder.

---

**`min`** `number`

The smallest number that can be set in the panel input.

---

**`max`** `number`

The largest number that can be set in the panel input.

---

**`step`** `number`

The increment amount when using the ↑ ↓ arrows or dragging the panel input.

---

**`suffix`** `string`

Decorative text appended to the end of the panel input.

---

## Prop type

The Number control passes a `number` to your component. If you don't set a `defaultValue` and no value is set in the builder, your component receives `undefined`.

## Example

**`Feed.makeswift.ts`**

```tsx Feed.makeswift.ts
import { Number } from "@makeswift/runtime/controls";

import { runtime } from "@/makeswift/runtime";

import { Feed } from "./Feed";

runtime.registerComponent(Feed, {
  type: "feed",
  label: "Feed",
  props: {
    itemsShown: Number({
      label: "Items shown",
      defaultValue: 10,
      min: 0,
      max: 100,
    }),
  },
});
```

**`Feed.tsx`**

```tsx Feed.tsx
const items = [
  { id: "1", name: "item 1" },
  { id: "2", name: "item 2" },
  { id: "3", name: "item 3" },
  { id: "4", name: "item 4" },
];

interface Props {
  itemsShown?: number;
}

export function Feed({ itemsShown = 10 }: Props) {
  return (
    <div>
      {items.slice(0, itemsShown).map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}
```

> **Info**
>
> `.makeswift.ts` is a naming convention for organizing Makeswift registration code. [Learn more](/developer/docs/reference/reactruntime/register-component#organizing-registration-code).