API ReferenceFieldsNumber

Number

Render a number input. Extends Base.

Interactive Demo

Example


const config = {
  components: {
    Example: {
      fields: {
        myNumber: {
          type: "number",
        },
      },
      render: ({ myNumber }) => {
        return <div>{myNumber}</div>;
      },
    },
  },
};

Params

Param	Example	Type	Status
`type`	`type: "number"`	”number”	Required
`max`	`max: 10`	number	-
`min`	`min: 0`	number	-
`placeholder`	`placeholder: "Lorem ipsum..."`	String	-

Required params

`type`

The type of the field. Must be "number" for Number fields.


const config = {
  components: {
    Example: {
      fields: {
        myNumber: {
          type: "number",
        },
      },
      // ...
    },
  },
};

Optional params

`max`

The maximum numeric value allowed.


const config = {
  components: {
    Example: {
      fields: {
        myNumber: {
          type: "number",
          max: 10,
        },
      },
      // ...
    },
  },
};

Interactive Demo

Example

`min`

The minimum numeric value allowed.


const config = {
  components: {
    Example: {
      fields: {
        myNumber: {
          type: "number",
          min: 0,
        },
      },
      // ...
    },
  },
};

Interactive Demo

Example

Placeholder

The placeholder text to display when the field is empty.


const config = {
  components: {
    Example: {
      fields: {
        myNumber: {
          type: "number",
          placeholder: "Lorem ipsum...",
        },
      },
      // ...
    },
  },
};

Interactive Demo

Example

`step`

The stepping interval when interacting with the field.


const config = {
  components: {
    Example: {
      fields: {
        myNumber: {
          type: "number",
          step: 0.1,
        },
      },
      // ...
    },
  },
};

Interactive Demo

Example

External

Object