> ## Documentation Index
> Fetch the complete documentation index at: https://docs.makeswift.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Number

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

<Frame type="glass" caption="A Number panel on a Feed component to set the number of items shown">
  <img src="https://mintcdn.com/makeswift/AOijlpVp0npNQ8wB/images/number-panel.png?fit=max&auto=format&n=AOijlpVp0npNQ8wB&q=85&s=798c5938b6dc687e7f2618740c5309ca" width="1024" height="640" data-path="images/number-panel.png" />
</Frame>

## Params

<ParamField query="label" type="string" default="Number">
  Text for the panel label in the Makeswift builder.
</ParamField>

<ParamField query="description" type="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).
</ParamField>

<ParamField query="labelOrientation" type="&#x22;horizontal&#x22; | &#x22;vertical&#x22;" default="horizontal">
  Orientation of the number label within the panel.
</ParamField>

<ParamField query="defaultValue" type="number">
  The value passed to your component when nothing is set in the Makeswift
  builder.
</ParamField>

<ParamField query="min" type="number" default={0}>
  The smallest number that can be set in the panel input.
</ParamField>

<ParamField query="max" type="number" default={0}>
  The largest number that can be set in the panel input.
</ParamField>

<ParamField query="step" type="number" default={1}>
  The increment amount when using the ↑ ↓ arrows or dragging the panel input.
</ParamField>

<ParamField query="suffix" type="string">
  Decorative text appended to the end of the panel input.
</ParamField>

## 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

<CodeGroup>
  ```tsx Feed.makeswift.ts theme={null}
  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,
      }),
    },
  });
  ```

  ```tsx Feed.tsx theme={null}
  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>
    );
  }
  ```
</CodeGroup>

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